:root {
    --blue-primary: #1D4B73;
    --blue-secondary: #183E67;
    --blue-light: #F0F1F2;
    --menu-border: #183E67;
    --reg-lookup: #003399;
    --cbn-header: #99ADBF;
    --cbn-header-text: unset;
    --cbn-links: #1D4B73;
}


body, input, textarea, select {
    font-family: Lato, sans-serif;
}

body {
    font-size: 0.9em;
}

.header-lft .logo {
    width: 300px;
    height: 50px;
    margin: auto 5px;
}

.header-md .logo {
    width: 280px;
    height: 50px;
    margin: 2px;
}


/* Nov 19 Overrides*/
#page-content > h2 {
    margin-top: 10px;
}

input[type="button"], input[type="submit"], .pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected, .pure-button, .pure-button.bg-primary {
    background-color: var(--blue-primary);
    color: #fff;
}

    .pure-button.bg-secondary {
        color: #fff;
        border-bottom: 2px solid rgba(0,0,0,0.2) !important;
        background-color: var(--blue-secondary);
    }

a.lnk-btn {
    border-bottom: 2px solid rgba(0,0,0,0.2) !important;
}

.lnk-btn-lx {
    padding: 16px 12px;
    background: #eee;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.reg-drop-down-arrow-cs {
    height: 70% !important
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus, .pure-button:hover {
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3) !important;
}

.box {
    border-radius: 2px !important;
}

.pure-button.bg-primary:hover, .pure-button-primary:hover {
    background-color: var(--blue-secondary) !important;
}

.pure-button.bg-secondary:hover {
    background-color: var(--blue-secondary) !important;
}

table.pure-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.pure-button.bg-delete:hover {
    background-color: #e53427 !important;
}

.pure-table, .pure-table th, .pure-table td {
    border: 0 !important;
}

.pure-form fieldset {
    padding: 10px !important;
    clear: both;
}

    .pure-form fieldset h3 {
        padding-bottom: 10px !important;
        margin-bottom: 15px !important;
    }

.pure-form input[type="text"], .pure-form select, .pure-form input[type="password"], .pure-form textarea, .pure-form > div {
    margin-bottom: 5px !important;
}

.page-menu-block {
    float: none !important;
    display: block !important;
    text-align: right;
    margin: -20px -20px 10px -20px !important;
    border-radius: 0px !important;
    padding-right: 40px;
    padding-left: 40px;
}

.mnu-btn {
    display: inline-block;
    vertical-align: middle;
    line-height: 25px;
}

    .mnu-btn img {
        vertical-align: middle;
    }

.pure-form select.no-arrow {
    -moz-appearance: none;
    -webkit-appearance: none;
}

    .pure-form select.no-arrow::-ms-expand {
        display: none;
    }

#upMsg #pnlMsg {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    border-radius: 0 !important;
}

.page-menu-parent > a {
    padding: 10px 5px !important;
}

.page-menu-parent:after {
    padding: 10px 0 10px 6px !important;
    margin-left: -4px;
}

.page-menu-parent:hover > a, .page-menu-parent:hover:after {
    background: #c6dcef;
}

.page-menu .page-menu-children {
    margin-top: 27px !important;
    right: 0;
    left: auto;
}

.page-menu > span {
    padding: 0 5px !important;
}

.pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea {
    padding: 0.4em .4em;
    border-radius: 0 !important;
}


.bg-input, .checkbox-list {
    border-radius: 2px !important;
}

.pure-table tbody tr:nth-child(even) td {
    background: #f9f9f9;
}

.ui-dialog {
    padding: 15px !important;
}

.loading > div {
    border-radius: 2px !important;
    padding: 15px !important;
}

.pnl, .pnl-info, .pnl-error, .pnl-warning, .pnl-success {
    border-radius: 2px;
}

​

h1, h2, h3, h4, h5, h6, h7 {
    font-family: Ubuntu, sans-serif;
    margin: 0 0 20px 0;
}

a {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer !important;
}

    a:hover {
        color: #39398e;
    }

    a[target='_blank']::after {
        content: "";
        padding: 8px;
        background: url('/imgs/icon-link.png') top left no-repeat;
        background-position-y: 8px;
        margin-left: 3px;
        text-decoration: none;
    }

    a.aspNetDisabled, a.disabled {
        cursor: not-allowed;
        text-decoration: line-through !important;
    }

.tooltip .tooltiptext {
    visibility: hidden;
    text-align: center;
}

#lnkBtnUnInvoice.tooltip:hover .tooltiptext {
    visibility: visible;
}

.lnk-btn.aspNetDisabled, .pure-button.aspNetDisabled {
    opacity: 0.5;
}

hr {
    height: 1px;
    background: #e5e5e5;
    border: none;
    margin: 20px 0;
}

.hrthick {
    height: 4px
}

.p0 {
    padding: 0px !important;
}

.p3 {
    padding: 3px !important;
}

.p5 {
    padding: 5px !important;
}

.p10 {
    padding: 10px !important;
}

.p15 {
    padding: 15px;
}

.p20 {
    padding: 20px;
}

.pr0 {
    padding-right: 0px !important;
}

.pr3 {
    padding-right: 3px !important;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr15 {
    padding-right: 15px;
}

.pr20 {
    padding-right: 20px;
}

.ph0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.ph10 {
    padding-left: 10px;
    padding-right: 10px;
}

.pv5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pv2 {
    padding-top: 2px;
    padding-bottom: 2px;
}

.pv0 {
    padding-top: 0;
    padding-bottom: 0;
}

.ph20 {
    padding-left: 20px;
    padding-right: 20px;
}

.pv10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ph5 {
    padding-right: 5px;
    padding-left: 5px;
}

.pt0 {
    padding-top: 0 !important;
}

.pt5 {
    padding-top: 5px !important;
}

.pt10 {
    padding-top: 10px !important;
}

.pt15 {
    padding-top: 15px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pl0 {
    padding-left: 0 !important;
}

.pl3 {
    padding-left: 3px !important;
}

.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pb0 {
    padding-bottom: 0px !important;
}

.pb10 {
    padding-bottom: 10px !important;
}

.pb15 {
    padding-bottom: 15px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.m0 {
    margin: 0 !important;
}

.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.m15 {
    margin: 15px;
}

.m20 {
    margin: 20px;
}

.ml0 {
    margin-left: 0;
}

.ml5 {
    margin-left: 5px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.mr3 {
    margin-right: 3px;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr30 {
    margin-right: 30px;
}

.mt0 {
    margin-top: 0 !important;
}

.mt3 {
    margin-top: 3px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px;
}

.mt70 {
    margin-top: 70px !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb8 {
    margin-bottom: 8px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mv5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.mv10 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.mv15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.mb-3 {
    margin-bottom: -3px !important;
}

.child-mb5 > div {
    margin-bottom: 5px;
}

.rc2 {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.rc5 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rc8 {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left;
}

.valign-top {
    vertical-align: top;
}

.valign-bottom {
    vertical-align: bottom;
}

.valign-middle {
    vertical-align: middle;
}

.no-wrap {
    white-space: nowrap;
}

.fnt-bold {
    font-weight: bold !important;
}

.fnt-nobold {
    font-weight: normal !important;
}

.fnt-xlg {
    font-size: 1.5em;
}

.fnt-lg {
    font-size: 1.25em !important;
}

.fnt-md {
    font-size: 1.13em !important;
    -webkit-text-size-adjust: none;
}

.fnt-sm {
    font-size: 0.85em;
}

.fnt-xsm {
    font-size: 0.75em;
}

.fnt-normal {
    font-size: 1em !important;
    line-height: normal !important;
}

.fnt-nodec {
    text-decoration: none;
}

    .fnt-nodec a {
        text-decoration: none;
    }

.lh17 {
    line-height: 17px;
}

.lh0 {
    line-height: 0;
}

.uppercase {
    text-transform: uppercase;
}

.left {
    float: left;
}

.right {
    float: right;
}

.inline-block {
    display: inline-block !important;
}

.block {
    display: block;
}

.block-center {
    margin: 0 auto;
}

.clear {
    clear: both;
}

.clear1em {
    clear: both;
    height: 1em;
}

.clear2em {
    clear: both;
    height: 2em;
}

.table {
    display: table;
}

.table-cell {
    display: table-cell;
}

.inline-btns {
    display: table;
    width: 100%;
}

    .inline-btns > div {
        display: table-cell;
        padding-left: 5px;
    }

        .inline-btns > div:first-child {
            width: 100%;
            padding-left: 0;
        }

.highlight {
    background-color: #fff093;
}

.rotate-270 {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.reg-bg {
    padding: .5em .6em;
    background: url(/imgs/reg-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #000;
    text-align: center;
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: bold;
    border: none !important;
    box-shadow: none !important;
}

    .reg-bg.reg-bg-sm {
        display: inline-block;
        font-size: 1em !important;
        line-height: normal !important;
        border: 1px solid transparent !important;
    }

    .reg-bg.reg-bg-xsm {
        padding: .3em .6em;
        display: inline-block;
        font-size: 1em !important;
        line-height: normal !important;
        border: 1px solid transparent !important;
        width: 110px;
    }

        .reg-bg.reg-bg-xsm.reg-bg-fixed-height {
            height: 16px;
        }

.hide {
    display: none !important;
}

.hide-notimp {
    display: none;
}

.row-selected td {
    background-color: #fffad6;
    color: #000 !important;
}

.required {
    font-weight: bold;
    font-size: 1.5em;
    color: #ca3c3c;
    line-height: 0;
}

input[type="text"].ipt-required:not([disabled]), input[type="email"].ipt-required:not([disabled]), textarea.ipt-required:not([disabled]), select.ipt-required:not([disabled]), .ipt-required > input[type="checkbox"]:not([disabled]) {
    border: 1px solid #ca3c3c !important;
}

input[type="text"].ipt-required-partial:not([disabled]), input[type="email"].ipt-required-partial:not([disabled]), textarea.ipt-required-partial:not([disabled]), select.ipt-required-partial:not([disabled]), .ipt-required-partial > input[type="checkbox"]:not([disabled]) {
    border: 1px dashed #ca3c3c !important;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus, .pure-button:hover {
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
}

.h-scroll {
    overflow-x: auto;
}

.v-scroll {
    overflow-y: auto;
    max-height: 600px !important;
}

.vs500 {
    overflow-y: auto;
    max-height: 500px !important;
}

.txt-success {
    color: #1cb841;
}

.txt-error, a > span.txt-error {
    color: #ca3c3c !important;
}

.txt-warning, a.txt-warning {
    color: #df7514 !important;
}

.txt-grey {
    color: #aaa;
}

.txt-white {
    color: #fff;
}

.txt-drkgrey {
    color: #555;
}

.calendar-zindex {
    z-index: 10001 !important;
}

.bg-default {
    color: #265778 !important;
}

.bg-primary {
    background-color: var(--blue-primary) !important;
    color: white !important;
}

.bg-success {
    background-color: #1cb841 !important;
    color: white !important;
}

.bg-error {
    background-color: #ca3c3c !important;
    color: white !important;
}

.bg-warning, .bg-warning td {
    background-color: #df7514 !important;
    color: white !important;
}

.bg-secondary {
    background-color: var(--blue-secondary) !important;
    color: white !important;
}

.bg-input {
    margin-bottom: 10px !important;
    width: 80%;
    background-color: #fff;
    padding: .4em .6em;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .bg-input:after {
        content: "\00a0"; /* \00a0 = hex code for non break space */
    }

    .bg-input.disabled {
        background-color: #eaeded !important;
        color: #687a7c !important;
    }

    .bg-input input[type=checkbox] {
        margin-right: 5px;
    }

    .bg-input img.tooltip {
        margin-left: 5px;
    }

.bg-stripes {
    background-image: linear-gradient(to right top,#fff 33%,#cfcfcf 33%,#cfcfcf 66%,#fff 66%);
    background-size: 3px 3px;
}

.bg-dots, .bg-dots td {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGElEQVQIW2M8dOjQfzs7O0ZGBgYGBhAHAEMSB0jcuAb+AAAAAElFTkSuQmCC) repeat;
}

.no-after:after {
    content: "";
}

.no-before:before {
    content: "";
}

.bg-transparent {
    background: none;
}

.bg-white, .bg-white td {
    background: #fff !important;
}

.bg-black, .bg-black td {
    background: #000 !important;
    color: white !important;
}

.bg-grey, .bg-grey td {
    background: #ccc !important;
}

.bg-lightgrey, .bg-lightgrey td {
    background: #f9f9f9 !important;
}

.bg-darkgrey, .bg-darkgrey td {
    background: #909090 !important;
    color: white !important;
}

.bg-red, .bg-red td {
    background: #ca3c3c !important;
    color: white !important;
}

.bg-lightred, .bg-lightred td {
    background: #fa7d7d !important;
}

.bg-darkred, .bg-darkred td {
    background: #b40d0d !important;
    color: white !important;
}

.bg-blue, .bg-blue td {
    background: #4e9fdc !important;
}

.bg-darkblue, .bg-darkblue td {
    background: #3176aa !important;
    color: white !important;
}

.bg-lightblue, .bg-lightblue td {
    background: #9ad1fa !important;
}

.bg-green, .bg-green td {
    background: #1cb841 !important;
    color: white !important;
}

.bg-lightgreen, .bg-lightgreen td {
    background: #9defb0 !important;
}

.bg-darkgreen, .bg-darkgreen td {
    background: #0a8f29 !important;
    color: white !important;
}

.bg-yellow, .bg-yellow td {
    background: #eeee3d !important;
}

.bg-lightyellow, .bg-lightyellow td {
    background: #ffffa8 !important;
}

.bg-darkyellow, .bg-darkyellow td {
    background: #dfdf11 !important;
}

.bg-orange, .bg-orange td {
    background: #eebf01 !important;
}

.bg-lightorange, .bg-lightorange td {
    background: #ffdd56 !important;
}

.bg-darkorange, .bg-darkorange td {
    background: #d8ad02 !important;
    color: white !important;
}

.bg-purple, .bg-purple td {
    background: #c786e5 !important;
    color: white !important;
}

.bg-lightpurple, .bg-lightpurple td {
    background: #e8bafe !important;
}

.bg-darkpurple, .bg-darkpurple td {
    background: #9d3ec9 !important;
    color: white !important;
}

.bg-turquoise, .bg-turquoise td {
    background: #62e1dd !important;
}

.bg-lightturquoise, .bg-lightturquoise td {
    background: #b5fbf9 !important;
}

.bg-darkturquoise, .bg-darkturquoise td {
    background: #20b1ac !important;
    color: white !important;
}

.bg-brown, .bg-brown td {
    background: #dca961 !important;
}

.bg-lightbrown, .bg-lightbrown td {
    background: #f3d09f !important;
}

.bg-darkbrown, .bg-darkbrown td {
    background: #b5833c !important;
    color: white !important;
}

.bg-amber {
    background-color: #f4ce4a;
}

.badge {
    background: #eee;
    border: 1px solid #ddd;
    display: block;
    padding: 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.bg-pink, .bg-pink td {
    background: #ffcece !important;
}

.brd-default {
    border: solid 1px #e5e5e5;
}

.brd-b-default {
    border-bottom: 1px solid #e5e5e5;
}

.brd-primary {
    border: solid 1px #0072d6;
}

.brd-success {
    border: solid 1px #1aa53b;
}

.brd-error {
    border: solid 1px #b53636;
}

.brd-warning {
    border: solid 1px #c96916;
}

.brd-secondary {
    border: solid 1px var(--blue-secondary);
}

.brd-darkblue {
    border: solid 1px #2c6893;
}

.brd-none {
    border: 0 !important;
}

.pnl-default {
    background: #E6E6E6 !important;
    color: #000;
    border: solid 1px #d8d8d8;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pnl-info {
    background: #FADA5E !important;
    color: #000;
    border: solid 1px #000;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.pnl-success {
    background: #1cb841 !important;
    color: white;
    border: solid 1px #1aa53b;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pnl-error {
    background: #ca3c3c !important;
    color: white;
    border: solid 1px #b53636;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .pnl-error a, .pnl-success a {
        color: #fff;
    }

.pnl-warning {
    background: #df7514;
    color: white;
    border: solid 1px #c96916;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pnl-secondary {
    background: #42b8dd;
    color: white;
    border: solid 1px #3da6c6;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pnl-darkblue {
    background: #3176aa;
    color: white;
    border: solid 1px #2c6893;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pnl-yellow {
    background: #c6dcef;
    color: #1c466b;
    border: 1px solid #c6dcef;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pnl-white {
    background: #fff;
    border: 1px solid #d1d1d1;
    padding: 10px 20px;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.box {
    margin: auto;
    border: solid 1px #eaeaea;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .box > h2, .box > .box-head {
        background-color: #f2f2f2;
        border-bottom: solid 1px #eaeaea;
        margin: 0;
    }

    .box > h2, .box > div {
        padding: 20px;
    }

.btn-small {
    font-size: 0.85em;
    padding: 5px 10px;
}

.btn-xsmall {
    font-size: 0.75em;
    padding: 1px 5px;
}

.alpha50 { /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */
    filter: alpha(opacity=50); /* Netscape */
    -moz-opacity: 0.5; /* Safari 1.x */
    -khtml-opacity: 0.5; /* Good browsers */
    opacity: 0.5;
}

.tbl {
    border-collapse: collapse;
    border-spacing: 0;
}

    .tbl td {
        padding: 5px;
    }

    .tbl th {
        padding: 5px;
        border: 1px solid #cccccc;
    }

.tbl-bbrd td {
    border-bottom: 1px solid #eaeaea;
    padding: 10px;
}

.tbl-bbrd > tr:last-child td, .tbl-bbrd tbody > tr:last-child td {
    border-bottom: 0;
}


.w1d {
    width: 30px;
}

.w2d {
    width: 40px;
}

.w3d {
    width: 50px;
}

.w4d {
    width: 60px;
}

.w5d {
    width: 70px;
}

.w6d {
    width: 80px;
}

.w100 {
    width: 100% !important;
}

.w95 {
    width: 95%;
}

.w90 {
    width: 90%;
}

.w85 {
    width: 85%;
}

.w80 {
    width: 80%;
}

.w75 {
    width: 75%;
}

.w60 {
    width: 60%;
}

.w50 {
    width: 50%;
}

.w25 {
    width: 25%;
}

.w30 {
    width: 30%;
}

.w33 {
    width: 33.33%
}

.w40 {
    width: 40%
}

.w66 {
    width: 66.66%;
}

.w20 {
    width: 20%;
}

.w15 {
    width: 15%;
}

.w101 {
    width: 101px;
}

.w125 {
    width: 125px;
}

.w150 {
    width: 150px !important;
}

.w175 {
    width: 175px !important;
}

.w200 {
    width: 200px;
}

.w250 {
    width: 250px;
}

.w300 {
    width: 300px;
}

.w350 {
    width: 350px;
}

.wauto {
    width: auto !important;
}

.w60px {
    width: 60px;
}

.w125px {
    width: 125px;
}

.mw130px {
    min-width: 130px;
}

[data-visible='true'] {
    display: '';
}

[data-visible='false'] {
    display: none;
}

div.div-table {
    display: table;
    width: 100% !important;
    border: 1px solid #cbcbcb;
    border-bottom: 0;
    border-right: 0;
}

    div.div-table.table-odd > div.row:nth-child(odd), div.div-table > div.row.row-odd {
        background: #f2f2f2;
    }

    div.div-table div {
        box-sizing: border-box;
    }

        div.div-table div.row {
            display: table-row;
            display: flex;
            flex-flow: row wrap;
        }

            div.div-table div.row > div {
                display: table-cell;
                border-right: 1px solid #cbcbcb;
                border-bottom: 1px solid #cbcbcb;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        div.div-table div.header {
            background: #e0e0e0 !important;
            font-weight: bold;
        }

            div.div-table div.header > div, div.div-table > div > div {
                padding: .5em 1em;
            }


img.thumb {
    border: 1px solid #c9d1d6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    padding: 5px;
}

    img.thumb.default {
        border: 2px solid #b53636;
        padding: 3px;
    }

/* jQuery Controls CSS ********/
.ui-datepicker {
    background: #fff;
    padding: 15px;
    border: 1px solid #c9d1d6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: none;
    z-index: 99999999 !important;
}

.ui-datepicker-next {
    float: right;
}

.ui-datepicker-next, .ui-datepicker-prev {
    font-size: 0.85em;
    background: #888;
    padding: 2px 4px;
    color: #fff;
    cursor: pointer;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

    .ui-datepicker-next:hover, .ui-datepicker-prev:hover {
        color: #eee;
    }

.ui-datepicker-title {
    margin: 8px 0 0 0;
    font-weight: bold;
}

.ui-datepicker-calendar th {
    font-size: 0.9em;
    color: #555;
}

.ui-datepicker-calendar td a {
    display: block;
    padding: 3px;
    border-radius: 2px
}

.ui-datepicker-today a {
    padding: 2px !important;
    border: 1px dashed #444;
}

.ui-datepicker-current-day a {
    background: #0078e7;
    color: #fff;
}

.ui-datepicker-week-end {
    background: #e9e9e9;
}

.ui-datepicker-buttonpane {
    text-align: center;
}

    .ui-datepicker-buttonpane button[data-handler="hide"] {
        display: none;
    }

    .ui-datepicker-buttonpane button[data-handler="today"] {
        border: 0;
        background: none;
        text-decoration: underline;
        margin-top: 3px;
    }

.ui-autocomplete {
    z-index: 20001;
    min-width: 400px;
    max-width: 650px;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

    .ui-autocomplete li {
        list-style-type: none;
        padding: 5px 15px;
        margin: 0;
    }

    .ui-autocomplete .ui-state-focus {
        background-color: #eee;
    }

.ui-helper-hidden-accessible, .ui-dialog-titlebar {
    display: none;
}

.ui-dialog {
    z-index: 10000;
    position: fixed;
    background: #fff;
    padding: 25px;
    border: 1px solid #c9d1d6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: none;
}

.ui-dialog-buttonpane {
    position: absolute;
    top: -10px;
    right: -10px;
}

    .ui-dialog-buttonpane button {
        font-weight: bold;
        font-size: 1.3em;
        background: #333;
        border: 1px solid #000;
        color: #fff;
        padding: 2px 6px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

.ui-widget-overlay {
    z-index: 10010;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #888;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.ui-accordion > fieldset > h3:hover, .ui-accordion > div > h3:hover {
    cursor: pointer;
}

.ui-accordion > fieldset > h3.ui-corner-all {
    margin: 0;
    border: 0;
    padding: 0;
}

.ui-accordion > fieldset > h3, .ui-accordion > div > h3, .ui-accordion > div > h4 {
    position: relative;
    outline: 0;
}

.ui-accordion .ui-accordion-header {
    padding-left: 40px;
    outline: none;
    cursor: pointer
}

    .ui-accordion .ui-accordion-header.accordionHeader {
        padding: 0px 0px 0px 40px;
        border: none !important;
        outline: none !important;
    }

.ui-accordion .ui-accordion-content.treeNode {
    border: none !important;
    outline: none !important;
}

.treeItem {
    border: none !important;
    outline: none !important;
}

.ui-accordion .ui-accordion-header label {
    margin-top: 0 !important;
}

.ui-accordion h4.ui-accordion-header-active {
    font-size: 120%;
}

.ui-accordion .ui-accordion-header-icon {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 150%;
    padding: 5px 0px 0px 10px;
    margin-top: 3px;
}

.ui-accordion > div {
    position: relative;
}

    .ui-accordion > div > h4 > .ui-accordion-header-icon {
        font-size: 140%;
        padding-top: 3px;
    }

.ui-accordion > fieldset > h3.ui-accordion-header {
    padding: 0 0 0 30px !important;
    margin: 0 0 0 0 !important;
}

    .ui-accordion > fieldset > h3.ui-accordion-header.ui-accordion-header-active {
        padding: 0 0 10px 30px !important;
        margin: 0 0 10px 0 !important;
    }

.ui-accordion > fieldset > h3 .ui-accordion-header-icon {
    margin-left: -10px;
    margin-top: -10px !important;
    margin-bottom: 0;
    margin-top: 0;
}

.ui-accordion .ui-icon-triangle-1-s:before {
    content: url(/imgs/Icons/close-accordion.svg);
}

.ui-accordion .ui-icon-triangle-1-e:after {
    content: url(/imgs/Icons/expand-accordion.svg);
}

.ui-accordion > div > h3 > img.logo,
.ui-accordion > div > h4 > img.logo {
    max-height: 30px;
    margin: -10px 0;
}

fieldset > legend > img.logo {
    max-height: 30px;
}

ol.message_list {
    position: relative;
}

/* Extend jQuery MiniColor */
.minicolors {
    width: 100% !important;
}

/* Extend PureCSS *************/
.pure-form-aligned .pure-control-group label {
    text-align: left;
    width: 7em;
}

    .pure-form-aligned .pure-control-group label.wide {
        width: 12em;
    }

.pure-form input[type="text"], .pure-form select, .pure-form input[type="password"], .pure-form textarea, .pure-form > div {
    margin-bottom: 10px !important;
}

    .pure-form > div.mb0 {
        margin-bottom: 0 !important;
    }

.pure-g-valign-fix {
    display: block;
}

.pure-g-border-box > div {
    box-sizing: border-box;
}

.pure-table {
    width: 100%;
}

    .pure-table th {
        background: #e0e0e0;
        text-align: left;
        color: #000;
    }

        .pure-table th a {
            color: #000;
            text-decoration: none;
            display: block;
            position: relative;
        }

            .pure-table th a:hover {
                text-decoration: underline;
            }

    .pure-table tr:hover td {
        background-color: #fffad6 !important;
        color: #000 !important;
    }

    .pure-table input {
        margin: 0 !important;
    }

.pure-table-bordered th {
    border: 1px dotted #e5e5e5 !important;
}

.pure-table-bordered td {
    border: 1px dotted #e5e5e5 !important;
}

.pure-table-bordered tbody td.nobrd {
    border: none !important;
}

.pure-table th.th-group-sub-header {
    background: #eaeaea;
    text-align: center;
}

.td-sort {
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

    .td-sort:hover {
        text-decoration: underline;
    }

    .pure-table th.sorted-desc a:after, .pure-table th.sorted-asc a:after, .td-sort:after {
        padding-left: 10px;
        line-height: 16px;
    }

    .pure-table th.sorted-desc a:after, .td-sort[data-sort-dir='desc']:after {
        content: '\21e9';
    }

    .pure-table th.sorted-asc a:after, .td-sort[data-sort-dir='asc']:after {
        content: '\21e7';
    }

    .pure-table th.sorted-desc a:before, .pure-table th.sorted-asc a:before, .td-sort:before {
        position: absolute;
        top: 24px;
        left: 0;
        background: #ede590;
        border: 1px solid #e0d784;
        font-size: 0.8em;
        padding: 3px;
        font-weight: normal;
    }

    .pure-table th.sorted-desc:hover a:before, .td-sort[data-sort-dir='desc']:hover:before {
        content: 'Ordered: Descending';
    }

    .pure-table th.sorted-asc:hover a:before, .td-sort[data-sort-dir='asc']:hover:before {
        content: 'Ordered: Ascending';
    }

.pure-table tbody tr:nth-child(even) td {
    background: #f2f2f2;
}

.pure-table tbody tr.pure-table-even td {
    background: none;
}

.pure-form .pure-input-4-5 {
    width: 80%;
}

.pure-form .pure-input-1-5 {
    width: 20%;
}

.pure-form .pure-input-2-5 {
    width: 40%;
}

.pure-form .pure-input-3-5 {
    width: 60%;
}

.pure-form .pure-input-4-5 {
    width: 80%;
}

.pure-form .pure-input-5-5 {
    width: 100%;
}

.pure-form fieldset {
    background-color: #FFF;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
}

    .pure-form fieldset h3 {
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

        .pure-form fieldset h3 > div.controls {
            margin-top: -9px;
            float: right;
            font-size: 0.8em;
            font-family: Lato, sans-serif;
        }

        .pure-form fieldset h3 > div.links {
            float: right;
        }

            .pure-form fieldset h3 > div.links a {
                text-decoration: none;
            }

.pure-inline label, .pure-inline input, .pure-inline select {
    display: inline !important;
}

    .pure-inline input[type=text], .pure-inline select {
        margin-top: 0 !important;
    }

.pure-form input[type=text][disabled], .pure-form input[type=password][disabled], .pure-form input[type=email][disabled], .pure-form input[type=url][disabled], .pure-form input[type=date][disabled], .pure-form input[type=month][disabled], .pure-form input[type=time][disabled], .pure-form input[type=datetime][disabled], .pure-form input[type=datetime-local][disabled], .pure-form input[type=week][disabled], .pure-form input[type=number][disabled], .pure-form input[type=search][disabled], .pure-form input[type=tel][disabled], .pure-form input[type=color][disabled], .pure-form select[disabled], .pure-form textarea[disabled], .pure-form input[type=checkbox][disabled] {
    cursor: not-allowed;
    color: #687a7c;
}

.pure-form-aligned a.pure-button {
    vertical-align: middle;
}

.pure-button:hover {
    color: #fff !important;
}

.pure-button img {
    vertical-align: text-bottom;
}

.pure-radio.pure-inline {
    display: inline;
}

    .pure-radio.pure-inline input[type=radio] {
        margin-left: 5px;
        margin-right: 5px;
    }

.pure-form .dialog-content {
    margin: 0 !important;
}

/*Grid*/
.pure-form .pure-input-1-5-grid-numbers {
    width: 20%;
    text-align: right;
}

/* Grouped controls in a bg-input background */
.bg-input.bg-input-group {
    padding: 0;
}

    .bg-input.bg-input-group input, .bg-input.bg-input-group select {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 1px !important;
        border: 0;
        box-shadow: none;
        background: none;
        display: inline;
    }

    .bg-input.bg-input-group.wauto:after {
        display: none;
    }

/* Subtle dropdown */
.select.subtle {
    border: 1px solid #ddd;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    -webkit-appearance: none !important;
    background: none;
    -webkit-box-shadow: none !important;
    float: left;
    padding: 0;
    margin: 0;
    color: rgba(0,0,0,0.9)
}

select.subtle:hover {
    border: 1px solid #ccc;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

select.subtle:focus {
    outline: none;
}

select.subtle.disabled {
    border: none !important;
    -webkit-appearance: none !important;
    background: none;
}

    select.subtle.disabled:disabled {
        color: #000;
    }

    select.subtle.disabled:hover {
        border: none !important;
        -webkit-appearance: none !important;
    }


/* Extend FullCalendar */
.fc-event-vert {
    min-height: 21px;
}

.fc-event-inner > div {
    padding: 3px !important;
}

.fc-event-vert .fc-event-time {
    font-size: inherit !important;
}

.fc-event-time input[type=checkbox] {
    position: relative;
    top: 3px;
    margin-right: 3px;
}

.fc-event-time span {
    font-weight: bold;
}

.fc-table-data {
    border-left: 1px solid #ddd;
}

    .fc-table-data > table th {
        padding: 3px 6px;
        text-align: left;
    }

    .fc-table-data .fc-agenda-slots td div {
        padding: 3px 6px;
    }

td.fc-web-bookings {
    background: #e8eef0 !important;
}


img.lightbox {
    cursor: pointer;
}

div#image-lightbox.has-gallery .image-lightbox-main {
    width: calc(100% - 100px);
}

div#image-lightbox img {
    max-width: 100%;
    display: block;
    margin: auto;
}

div#image-lightbox .image-lightbox-main {
    width: auto;
    display: inline-block;
}

div#image-lightbox .image-lightbox-gallery {
    width: 100px;
    max-height: 425px;
    display: inline-block;
    vertical-align: top;
    padding-left: 15px;
    box-sizing: border-box;
    overflow-y: auto;
}

    div#image-lightbox .image-lightbox-gallery .selected {
        border: 2px solid #3176aa;
    }

    div#image-lightbox .image-lightbox-gallery img {
        cursor: pointer;
    }

/* Tab pages */
.tabs {
}

    .tabs + .tab-pages {
        background: #fdfdfd;
    }

    .tabs input[type="radio"] {
        display: none;
    }

        .tabs input[type="radio"] + label {
            background: #e0e0e0 !important;
            display: inline-block;
            padding: 10px 15px;
            -webkit-border-radius: 5px 5px 0 0;
            -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
            border: 1px solid #ccc;
            border-bottom: 0px !important;
            vertical-align: bottom;
            margin: 0;
            cursor: pointer;
            color: inherit
        }

        .tabs input[type="radio"]:checked + label {
            position: relative;
            top: 1px;
            padding-top: 15px;
            padding-bottom: 15px;
            background: #fdfdfd;
            border: 1px solid #cbcbcb;
            border-bottom: none !important;
        }

        .tabs input[type="radio"] + label:hover {
            color: #555 !important;
        }

        .tabs input[type="radio"]:checked + label:hover {
            color: #333 !important;
            z-index: 1;
        }

.tabs-body {
    padding: 10px;
    display: block;
    border: 1px solid #cbcbcb;
    background: #fdfdfd;
}
/* jQuery solution for .tabs input[type="radio"]:checked + label show hide is in .js*/


/* Unstyled - Tab pages */
.unstyled-tabs {
}

    .unstyled-tabs + .tab-pages {
        background: inherit !important;
    }

    .unstyled-tabs input[type="radio"] {
        display: inline-block;
    }

        .unstyled-tabs input[type="radio"] + label {
            background: inherit !important;
            display: inline-block;
            padding: 0px 0px;
            -webkit-border-radius: 5px 5px 0 0;
            -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
            border: 0px solid #ccc;
            border-bottom: 0px !important;
            vertical-align: bottom;
            margin: 0;
            cursor: pointer;
            color: inherit
        }

        .unstyled-tabs input[type="radio"]:checked + label {
            position: relative;
            top: 1px;
            padding-top: 0px;
            padding-bottom: 0px;
            background: transparent;
            border: 0px solid #cbcbcb;
            border-bottom: none !important;
        }

        .unstyled-tabs input[type="radio"] + label:hover {
            color: inherit !important;
        }

        .unstyled-tabs input[type="radio"]:checked + label:hover {
            color: inherit !important;
            z-index: 1;
        }

.unstyled-tabs-body {
    padding: 0px;
    display: block;
    border: 0px solid #cbcbcb;
    background: transparent;
}
/* jQuery solution for .tabs input[type="radio"]:checked + label show hide is in .js*/



/* Panel Tabs */
.pnltabs {
    max-width: 922px;
    border-bottom: 1px solid #999;
    padding: 0;
    margin: 0 auto 0 auto;
}

    .pnltabs [type=radio] {
        display: none;
        margin: 0;
        padding: 0;
    }

        .pnltabs [type=radio] ~ label {
            color: #555 !important;
            position: relative;
            top: 1px;
            padding: 20px 40px;
            font-size: 1.5em;
            border: 1px solid #999;
            -webkit-box-shadow: inset 0px -5px 8px -5px rgba(0,0,0,0.5);
            -moz-box-shadow: inset 0px -5px 8px -5px rgba(0,0,0,0.5);
            box-shadow: inset 0px -5px 8px -5px rgba(0,0,0,0.5);
            -webkit-border-bottom-left-radius: 0px;
            -moz-border-radius-bottomleft: 5px;
            border-bottom-left-radius: 0px;
            -webkit-border-bottom-right-radius: 0px;
            -moz-border-radius-bottomright: 5px;
            border-bottom-right-radius: 0px;
        }

        .pnltabs [type=radio]:checked + label {
            background: white;
            border: 1px solid #999;
            border-bottom: 1px solid white;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        .pnltabs [type=radio] + label:hover {
            color: #333 !important;
        }

        .pnltabs [type=radio]:checked + label:hover {
            color: #000 !important;
        }

.attlevel [type=checkbox] {
    display: none;
}

.attlevelred [type=checkbox] ~ label, .attlevelred > .aspNetDisabled ~ label {
    background: url('/imgs/icon-traffic-red-off.png') no-repeat center center;
    width: 20px !important;
    height: 20px !important;
    padding: 2px 10px;
    cursor: pointer;
}

.attlevelamber [type=checkbox] ~ label, .attlevelamber > .aspNetDisabled ~ label {
    background: url('/imgs/icon-traffic-amber-off.png') no-repeat center center;
    width: 20px !important;
    height: 20px !important;
    padding: 2px 10px;
    cursor: pointer;
}

.attlevelgreen [type=checkbox] ~ label, .attlevelgreen > .aspNetDisabled ~ label {
    background: url('/imgs/icon-traffic-green-off.png') no-repeat center center;
    width: 20px !important;
    height: 20px !important;
    padding: 2px 10px;
    cursor: pointer;
}

.attlevelred [type=checkbox] ~ label:hover {
    background: url('/imgs/icon-traffic-red-on.png') no-repeat center center;
}

.attlevelamber [type=checkbox] ~ label:hover {
    background: url('/imgs/icon-traffic-amber-on.png') no-repeat center center;
}

.attlevelgreen [type=checkbox] ~ label:hover {
    background: url('/imgs/icon-traffic-green-on.png') no-repeat center center;
}

.attlevelred [type=checkbox]:checked + label {
    background: url('/imgs/icon-traffic-red-on.png') no-repeat center center;
}

.attlevelamber [type=checkbox]:checked + label {
    background: url('/imgs/icon-traffic-amber-on.png') no-repeat center center;
}

.attlevelgreen [type=checkbox]:checked + label {
    background: url('/imgs/icon-traffic-green-on.png') no-repeat center center;
}

.labelHidden label {
    display: none;
}


a.loginforgotlink {
    color: #efefef;
    text-decoration: underline;
    background: rgba(0,0,0,0.35);
    padding: 8px 0 10px 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

    a.loginforgotlink:hover {
        color: #ffffff;
        background: rgba(0,0,0,0.5);
    }

.tab-pages {
    max-width: 900px;
    padding: 10px;
    border: 1px solid #999;
    border-top: 1px solid white;
    margin: 0 auto 0 auto;
}

/* Site Specific Styles *******/

.header {
    display: table;
    width: 100%;
    margin-right: 2px;
}

.header-lft, .header-rgt {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 10px 5px 10px;
}

.header-rgt {
    text-align: right;
}

    .header-rgt > div {
        float: right;
    }

.header-lg-logo img, .header-md-logo img {
    max-height: 60px;
}

.header-md {
    display: none;
}

.welcome-area {
    margin-right: 10px;
}

    .welcome-area select {
        padding-left: 5px;
        font-size: 0.9em;
    }

    .welcome-area .credits-container {
        display: inline;
    }

        .welcome-area .credits-container a {
            display: inline-block;
            margin-left: 0.25rem;
            padding-inline: 0.5rem;
            padding-block: 0.25rem;
        }

            .welcome-area .credits-container a[target='_blank']::after {
                content: none;
            }

.veh-reminders {
    background: #fff;
    padding: 12px 10px 10px 10px;
    border: 1px solid #e4e4e4;
    overflow: auto;
}

    .veh-reminders > h4 {
        border-bottom: 1px solid #e4e4e4;
        padding-bottom: 9px;
        margin-bottom: 10px;
        font-weight: normal;
        font-size: 1.2em;
    }

    .veh-reminders > div {
        margin-bottom: 5px;
    }

        .veh-reminders > div:last-child {
            margin-bottom: 0;
        }

    .veh-reminders .bg-input, .veh-reminders input[type="text"] {
        margin: 0 !important;
        width: 100%;
    }

    .veh-reminders .btns {
        text-align: center;
    }

    .veh-reminders img {
        vertical-align: bottom;
    }

    .veh-reminders .table {
        display: table;
        width: 100%;
    }

        .veh-reminders .table > div {
            display: table-row;
        }

            .veh-reminders .table > div > div {
                display: table-cell;
                padding: 0 5px 5px 0;
            }

                .veh-reminders .table > div > div:last-child {
                    padding-right: 0;
                }

            .veh-reminders .table > div:last-child > div {
                padding-bottom: 0;
            }

        .veh-reminders .table .head-row > div {
            font-weight: bold;
            padding-bottom: 0;
        }

        .veh-reminders .table .email, .veh-reminders .table .sms {
            text-align: center;
        }

    .veh-reminders .pnl-info {
        padding: 8px 10px;
    }

    .veh-reminders .table > div > .label {
        border-bottom: 1px solid #e4e4e4;
    }

    .veh-reminders .table > div:last-child > .label {
        border: 0;
    }

.lbl-defer input[type="checkbox"] {
    float: right;
    margin-top: 2px !important;
}

.lbl-defer:after {
    display: table;
    content: '';
    clear: both;
}

.report-sub-title {
    font-size: 0.65em;
    margin-top: 3px;
    font-weight: normal;
}

.full-cal-ajax {
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
}

.full-cal-ajax-header {
    background-color: #fff;
    padding-bottom: 10px;
}

    .full-cal-ajax-header input[type=text], .full-cal-ajax-header select {
        display: inline-block !important;
        margin: 0 !important;
    }

.full-cal-ajax-header {
    display: table;
    width: 100%;
}

    .full-cal-ajax-header > div {
        display: table-cell;
        padding-right: 10px;
        vertical-align: top;
    }

        .full-cal-ajax-header > div:last-child {
            padding-right: 0;
        }

    .full-cal-ajax-header .cal-hours th {
        font-size: 0.85em;
        white-space: nowrap;
        padding: .35em .7em;
    }

    .full-cal-ajax-header .cal-hours td {
        font-weight: bold;
        padding: .35em .7em;
    }

    .full-cal-ajax-header .cal-hours img {
        width: 14px;
        height: auto;
        margin-left: 2px;
    }

    /*
.full-cal-ajax-header .cal-goto:after{content:'';display:table;clear:both;}

*/
    .full-cal-ajax-header .cal-goto * {
        box-sizing: border-box;
    }

    .full-cal-ajax-header .cal-goto > div > div, .full-cal-ajax-header .cal-goto > div > div > div {
        display: inline-block;
    }

        .full-cal-ajax-header .cal-goto > div > div:first-child {
            width: 65%;
            max-width: 250px;
        }

    .full-cal-ajax-header .cal-goto input {
        width: 100%;
    }

    .full-cal-ajax-header .cal-goto a.pure-button {
        width: 65%;
        margin-top: 5px;
    }

    .full-cal-ajax-header .cal-goto-btns {
        white-space: nowrap;
    }

        .full-cal-ajax-header .cal-goto-btns img {
            margin-left: 5px;
        }


    .full-cal-ajax-header .cal-counts {
        text-align: center;
    }

        .full-cal-ajax-header .cal-counts > div {
            text-align: center;
            display: inline-block;
            padding: 0 10px;
        }

    .full-cal-ajax-header .cal-filters { /* width: 18%; */
    }

        .full-cal-ajax-header .cal-filters select {
            width: 100%;
        }


.menu a.active:before {
    content: "\2713";
    margin-right: 10px;
    font-weight: bold;
}

.page-menu-block {
    float: right;
    margin: -7px 0 10px 10px;
    font-weight: bold;
}

.page-menu a {
    text-decoration: none;
    color: #1c466b;
    padding: 10px 0;
}

    .page-menu a:hover {
        text-decoration: underline;
        color: #232007;
    }

.page-menu > span {
    padding: 0 10px;
}

.page-menu select {
    padding: 1px;
    font-size: 0.85em;
}



.dropdownmenu {
    position: relative;
    display: inline-block;
}

    .dropdownmenu > a {
        text-decoration: none;
        display: inline-block;
    }

    .dropdownmenu > span {
        z-index: 999999;
        -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
        box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
    }

    .dropdownmenu:hover > span {
        display: block;
    }

    .dropdownmenu > span {
        display: none;
        position: absolute;
        margin-top: -1px;
        border: solid 1px transparent;
        webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

        .dropdownmenu > span > a {
            display: block;
            padding: 6px 10px;
            background: none;
            border-bottom: solid 1px transparent;
            text-decoration: none;
            min-width: 120px;
            max-width: 300px;
        }

            .dropdownmenu > span > a:last-child {
                border-width: 0;
            }

            .dropdownmenu > span > a:hover {
                text-decoration: underline;
            }

        .dropdownmenu > span .pure-button {
            text-decoration: none
        }

/* START Drop down menu delayed hover appearance*/
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.dropdownmenu:hover > span {
    -webkit-animation: fadeIn 0.1s;
    animation: fadeIn 0.1s;
}

.dropdownmenu.align-right > span {
    right: 0;
}

.dropdownmenu > a.pure-button {
    padding-right: 0em;
}

    .dropdownmenu > a.pure-button:before {
        content: url(/imgs/Icons/expand-sub-menu-white.svg);
        border-left: 1px#eee solid;
        float: right;
        margin-left: 1em;
        padding: 0 0.5em;
    }

.dropdownmenu.small > a.pure-button:before {
    content: "\25bc";
    border: none !important;
    float: right;
    margin-left: 0em;
    padding: 0 0.5em;
}

.dropdownmenu.yellow > a {
    color: #514a09;
    background: #ede590;
    border-color: #e0d784;
}

.dropdownmenu.yellow > span {
    background: #f2eaa9;
    border-color: #ddd377;
}

    .dropdownmenu.yellow > span > a {
        border-color: #ddd377;
        color: #514a09;
    }

        .dropdownmenu.yellow > span > a:hover {
            background: #eae19f;
        }

.dropdownmenu.lightgreen > a {
    color: #51ac4b;
    background: #e9f8e8;
    border-color: #d4e6d3;
}

.dropdownmenu.lightgreen > span {
    background: #e9f8e8;
    border-color: #d4e6d3;
}

    .dropdownmenu.lightgreen > span > a {
        border-color: #d4e6d3;
        color: #51ac4b;
    }

        .dropdownmenu.lightgreen > span > a:hover {
            background: #dceedb;
        }

.dropdownmenu.grey > a {
    color: #444;
    background: #f1f1f1;
    border-color: #e5e5e5;
}

.dropdownmenu.grey > span {
    background: #f1f1f1;
    border-color: #e5e5e5;
}

    .dropdownmenu.grey > span > a {
        border-color: #e5e5e5;
        color: #444;
    }

        .dropdownmenu.grey > span > a:hover {
            background: #ececec;
        }


.mnu-btn {
    padding: 7px 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.lnk-btn {
    padding: 6px 8px;
    background: #eee;
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .lnk-btn:hover {
        background: #dee8f2;
        border-color: #bcc8d3;
    }

    .lnk-btn img {
        vertical-align: text-bottom;
    }

#tooltip-container {
    display: none;
    background: #fff;
    border: 1px solid #bbb;
    color: #000;
    padding: 8px 14px;
    position: absolute;
    z-index: 10299;
    max-width: 500px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}

.tooltip {
    cursor: pointer;
}

img.tooltip {
    vertical-align: top;
    width: 16px;
    height: 16px;
}

.iframe {
    border: solid 1px #d1d1d1;
    background: #fff;
    width: 100%;
    min-height: 600px;
}

#divPDFPreview .dialog-content, #divVVPanel #divVid {
    background: url('/imgs/loading.gif') no-repeat;
    background-position: 50%;
}

.break-word {
    word-break: break-word;
}

.ajaxloading {
    position: relative;
}

div.ajaxloading:before, tr.ajaxloading td:before {
    content: url('/imgs/loading-small.gif');
    width: 100%;
    text-align: center;
    display: block;
    margin: 5px;
}

div.ajaxloading.error td:before, tr.ajaxloading.error td:before {
    content: url('/imgs/icon-warning.png');
}


.image-gallery > div {
    position: relative;
    display: inline-block;
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
    background: url('/imgs/loading-small.gif') no-repeat;
    background-position: 50%;
}

    .image-gallery > div:hover {
        background: url('/imgs/icon-camera.png') no-repeat;
        background-position: 50%;
    }

    .image-gallery > div > img {
        width: 100%;
    }

        .image-gallery > div > img:hover {
            opacity: 0.6;
        }

    .image-gallery > div:first-child {
        background: none;
    }

    .image-gallery > div a.pure-button, .image-gallery > div a.pure-button:hover {
        border: 3px dashed #c2c2c2 !important;
    }

    .image-gallery > div:first-child img {
        width: auto;
    }

    .image-gallery > div:first-child > img:hover {
        opacity: 1.0;
    }

    .image-gallery > div > .tools {
        position: absolute;
        right: 0;
        bottom: 0;
        text-align: right;
        width: 100%;
        line-height: 26px;
    }

        .image-gallery > div > .tools a.delete {
            background: #ec5050;
        }

            .image-gallery > div > .tools a.delete:hover {
                background: #f17070;
            }

        .image-gallery > div > .tools a {
            padding: 5px;
        }

.play-video {
    cursor: pointer;
}

.video-gallery > div:hover {
    background: #eee;
}

.video-gallery > div {
    margin-bottom: 10px;
    border: 1px solid #eee;
    background: #fafafa;
    border-radius: 5px;
    margin-right: 10px;
    padding: 10px;
}

    .video-gallery > div .video-thumb {
        float: left;
        margin-right: 10px;
        width: 80px;
        height: 60px;
    }

.loginwrapper {
    height: 100%;
    width: 100%;
    display: block;
    padding: 10% 0 0 0;
    margin: auto;
    text-align: center;
}

.loginpanel {
    margin: auto;
    padding: 0;
    display: block;
    text-align: left;
}

.report-controls > label {
    display: inline-block;
    width: 90px;
}

    .report-controls > label.wide {
        width: 290px;
    }

    .report-controls > label > input[type='checkbox'] {
        float: right;
        margin-top: 3px;
    }

.report-controls select, .report-controls input[type=text], .report-controls .bg-input {
    margin-right: 20px;
    width: 200px;
}
/*.report-controls + .report-controls { border-top: 1px solid #e5e5e5; margin-top: 10px; padding-top: 20px;}*/
.checkbox-list {
    max-width: 100%;
    margin-top: 5px;
    background: #fcfcfc;
    border: solid 1px #d1d1d1;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .checkbox-list.vscroll {
        max-height: 90px;
        overflow-y: scroll;
    }

    .checkbox-list input {
        width: auto;
        margin-right: 5px;
    }

    .checkbox-list label {
        display: inline;
        white-space: normal;
    }

    .checkbox-list.ul-inline ul {
        display: inline;
    }

    .checkbox-list.ul-head ul:first-child {
        margin-bottom: 8px;
        padding-bottom: 2px;
        border-bottom: 1px solid #e0e0e0;
    }

    .checkbox-list ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .checkbox-list ul li {
            display: inline-block;
            width: 190px;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: top;
            margin-bottom: 8px;
            padding-left: 22px;
            text-indent: -22px;
        }

    .checkbox-list.wide ul li {
        width: 260px;
    }

.lab-slots-diag .labour-slots-title {
    font-weight: bold;
    display: block;
}

.lab-slots-diag .labour-slots-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .lab-slots-diag .labour-slots-header .labour-slots-date {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 5px;
    }

.lab-slots-diag .names > a {
    font-size: 1.15em;
    display: block;
    text-decoration: none;
    color: #8e8e8e;
    background: #ececec;
    font-weight: bold;
    padding: 8px 14px;
    border: 1px solid #cbcbcb;
    border-width: 1px 1px 0 1px;
    min-width: 75px;
}

    .lab-slots-diag .names > a:first-child {
        border-top-left-radius: 5px;
    }

    .lab-slots-diag .names > a:last-child {
        border-bottom: 1px solid #cbcbcb;
        border-bottom-left-radius: 5px;
    }

    .lab-slots-diag .names > a.active, .lab-slots-diag .names > a:hover {
        color: #000;
        background: #fff;
    }

    .lab-slots-diag .names > a.active {
        border-right: none;
    }

.lab-slots-diag .names {
    z-index: 2;
    position: relative;
    right: -1px;
}

.lab-slots-diag .slots {
    background: #fff;
    padding: 10px 15px;
    border-radius: 0 5px 5px 5px;
    position: relative;
    z-index: 1;
    min-height: 250px;
}

    .lab-slots-diag .slots > span > a {
        min-width: 120px;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        display: inline-block;
        margin: 6px 8px 6px 0;
        padding: 8px 14px;
        background-color: #4caf50;
        border: none;
        text-align: center;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.2s ease-in-out;
        position: relative;
    }

        .lab-slots-diag .slots > span > a:hover {
            background-color: #43a047;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .lab-slots-diag .slots > span > a.unavail, .lab-slots-diag a.unavail:not(a) {
            background-color: #e57373;
            color: #fff;
            border: none;
        }

            .lab-slots-diag .slots > span > a.unavail::after {
                content: "\2716";
                position: absolute;
                right: 0.5rem;
                top: 50%;
                transform: translateY(-50%);
                color: #fff;
            }

.lab-slots-diag a.unavail::after {
    content: "\2716";
    color: red;
}

.lab-slots-diag .slots > span > a.next::after {
    content: '\21D2';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: green;
}

.lab-slots-diag .slots > span > a.booked {
    background-color: #607d8b;
    color: #fff;
    padding: 8px 10px 8px 18px;
    background-image: url('/imgs/reg-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
}

    .lab-slots-diag .slots > span > a.booked:hover {
        background-color: #546e7a;
    }

.lab-slots-diag a {
    color: black;
}

.slots .dropdownmenu > span {
    box-shadow: 1px 1px 1px 2px rgba(211, 211, 211, 0.5);
    border-radius: 5px;
    background-color: #fff;
}

    .slots .dropdownmenu > span > a {
        padding: 5px 20px 5px 5px;
        border-bottom: solid 1px rgba(211, 211, 211, 0.7);
        color: rgba(0,0,0,0.7);
        text-decoration: none;
        display: block;
    }

        .slots .dropdownmenu > span > a:hover {
            background-color: rgba(240,240,240,0.5);
            text-decoration: none;
        }

        .slots .dropdownmenu > span > a:last-child {
            border-bottom: none;
        }


.lab-slots-diag .labour-slot-make-available,
.lab-slots-diag .labour-slot-make-unavailable,
.lab-slots-diag .labour-slot-make-all-available,
.lab-slots-diag .labour-slot-make-all-unavailable {
    border: 3px solid #d4e6d3;
    font-weight: bold;
    font-size: 0.9em;
    padding: 5px 10px;
    width: 150px;
    letter-spacing: 1px;
    display: inline-block;
    border-radius: 5px;
    min-height: 40px;
    min-width: 222px;
    position: relative;
    text-transform: uppercase;
}

.labour-slot-make-all-unavailable {
    background-color: #1a4b6d;
    color: #fff;
    font-weight: bold;
    padding: 8px 16px;
    border: 1px solid #124060;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .labour-slot-make-all-unavailable:hover {
        background-color: #14507d;
    }

.labour-nav-button {
    background: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
    color: #333;
    border: 1px solid #ccc;
    padding: 4px 10px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

    .labour-nav-button:hover {
        background: linear-gradient(to bottom, #e0e0e0, #f9f9f9);
    }

.lab-slot-items td {
    padding: 0;
    width: 14.28%;
    vertical-align: top;
}

    .lab-slot-items td > div {
        background: #f9f9f9;
        padding: 10px 15px;
        border-bottom: 1px solid #e5e5e5;
    }

.lab-slot-items .empty > td {
    padding: .5em 1em;
}



.multi-select[disabled] .multi-select-trigger {
    background-color: #eaeded;
    color: #687a7c;
    pointer-events: none;
}

.multi-select .multi-select-trigger {
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

    .multi-select .multi-select-trigger:after {
        content: "\25bc"; /*float:right*/
        ;
        font-size: 70%;
        margin-top: 3px;
        position: absolute;
        right: 4px;
    }

.multi-select .multi-select-filters {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #d8d8d8;
}

.multi-select .multi-select-items {
    display: none;
    position: absolute;
    z-index: 999999;
    padding: 10px;
    margin-right: 20px;
    margin-top: -15px;
    max-width: 500px;
}

    .multi-select .multi-select-items span {
        margin-bottom: 4px !important;
        cursor: pointer;
        width: auto !important;
    }


.multi-select.dropdown .multi-select-items {
    padding: 0px !important;
    margin-bottom: 0px;
    max-height: 200px;
    overflow: auto;
    width: 100%;
    max-width: 350px;
}

    .multi-select.dropdown .multi-select-items span {
        display: block;
        padding-left: 10px !important;
        padding-right: 5px !important;
        padding-bottom: 3px !important;
        padding-top: 3px !important;
        margin-bottom: 0px !important;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

        .multi-select.dropdown .multi-select-items span:hover {
            background: #3176aa;
            color: #fff;
        }

            .multi-select.dropdown .multi-select-items span:hover::before {
                color: #fff;
            }

        .multi-select.dropdown .multi-select-items span::before {
            content: '\2610';
            padding-left: 0px;
            padding-right: 4px;
            font-size: 120%;
        }

        .multi-select.dropdown .multi-select-items span.selected::before {
            content: '\2611';
        }




.maxh180 {
    max-height: 180px !important;
}

.maxh300 {
    max-height: 300px !important;
}

.maxw180 {
    max-width: 180px !important;
}

#dashboard {
    width: 100%;
}


.page-menu-parent {
    cursor: pointer;
    position: relative;
    white-space: normal;
    color: #1c466b;
}

    .page-menu-parent:after {
        content: url(/imgs/Icons/expand-sub-menu-blue.svg);
        padding: 10px 0;
    }

    .page-menu-parent:hover .page-menu-children {
        display: inline-block;
    }

.page-menu-children {
    z-index: 50;
    display: none;
    position: absolute;
    left: 0;
    background: #c6dcef;
    border: solid 1px #c6dcef;
    margin-top: 20px !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    .page-menu-children > a, .page-menu-children > .page-menu-parent-lv2 > a {
        display: inline-block;
        box-sizing: border-box;
        min-width: 200px;
        padding: 10px 15px;
        border-bottom: solid 1px #d4ebff;
    }

        .page-menu-children > a:last-child, .page-menu-children > label:last-child > a {
            border-width: 0;
        }

        .page-menu-children > a:hover {
            background: #d4ebff;
        }

.page-menu-children-align-right {
    left: auto;
    right: -21px;
}

.page-menu-children > .page-menu-parent-lv2 {
    position: relative;
    display: inline-block;
}

    .page-menu-children > .page-menu-parent-lv2:hover, .page-menu-children .page-menu-children-lv2 > a:hover {
        background: #d4ebff;
    }

    .page-menu-children > .page-menu-parent-lv2 > a:after {
        content: url(/imgs/Icons/expand-sub-menu-child-blue.svg);
        padding: 4px 0;
        padding-left: 4px;
        float: right;
        font-size: 2em;
        line-height: 0;
        text-decoration: none;
    }

    .page-menu-children > .page-menu-parent-lv2.remove-arrow > a:after {
        content: none;
    }

.page-menu-children .page-menu-children-lv2 {
    z-index: 100;
    display: none;
    position: absolute;
    left: 190px;
    top: 0;
    background: #c6dcef;
    border: solid 1px #d4ebff;
    margin-top: -1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.page-menu-parent-lv2:hover .page-menu-children-lv2 {
    display: inline-block;
    box-sizing: border-box;
    min-width: 200px;
}

.page-menu-children .page-menu-children-lv2 > a {
    padding: 10px 15px;
    display: block;
    border-bottom: solid 1px #d4ebff;
}

    .page-menu-children .page-menu-children-lv2 > a:last-child {
        border-width: 0;
    }

.page-menu-children-lv2-align-left {
    left: auto !important;
    right: 193px;
}


.public-header {
    max-width: 920px;
    width: 100%;
    margin: 10px auto 10px auto;
}

.public-container {
    max-width: 900px;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* Google Chart Styles */
.google-chart > div > div:first-child > div > svg > defs + rect + g > g, .google-chart > div > div:first-child > div > svg > defs + rect + g > path,
.google-chart > div > div:first-child > div > svg > defs + rect + g + g > g, .google-chart > div > div:first-child > div > svg > defs + rect + g + g > path {
    cursor: pointer;
}


/* Slider */
.slider {
    overflow: hidden;
}

    .slider .next, .slider .prev {
        width: 25px;
        height: 25px;
        position: absolute;
        background: url('/imgs/arr.png') no-repeat;
    }

    .slider .prev {
        left: 3%;
        background-position: 0 50%;
    }

    .slider .next {
        right: 3%;
        background-position: -26px 50%;
    }

        .slider .prev:hover, .slider .next:hover {
            cursor: pointer;
        }

/* Accordion */
.ui-accordion > div {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
}

    .ui-accordion > div > h3 {
        background: #f1f1f1;
        margin: 0;
        cursor: pointer;
        padding: 15px;
    }

        .ui-accordion > div > h3:hover {
            background: #e5e5e5;
        }

    .ui-accordion > div > h4 {
        background: #f1f1f1;
        margin: 0;
        cursor: pointer;
        padding: 10px;
        font-weight: normal;
    }

        .ui-accordion > div > h4:hover {
            background: #e5e5e5;
        }

    .ui-accordion > div > div {
        border-top: 1px solid #e5e5e5;
        padding: 20px;
    }

.treeNode {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.treeItem {
    padding: 5px 5px 5px 40px !important;
}

/* Draggable */
.ui-draggable-handle {
    cursor: move;
}

.dialog.ui-draggable {
    height: auto !important;
}

.dial.google-chart.ui-draggable {
    position: absolute;
}

/* Sortable*/
.sortable-table .sortable-table-handle {
    font-size: 120%;
    font-weight: bold;
    padding: 0 5px !important;
}

.sortable-table .sortable-table-handle-labour-units {
    font-size: 120%;
    font-weight: bold;
}

.sortable-table .sortable-table-handle:hover {
    cursor: move;
}

.sortable-table .ui-state-highlight td {
    background-color: #fffad6 !important;
}

.ui-sortable-helper {
    opacity: 0.9;
}

.sortable-group-header {
    border: 2px solid #9c9c9c;
    border-width: 1px 1px 2px 1px;
}

    .sortable-group-header td {
        background: #fff !important;
    }

.sortable-group-header-empty td {
    opacity: 0.8;
    font-size: 90%;
}

.sortable-active-helper {
    display: none;
}

/* Ajax Loading */
.loading {
    text-align: center;
    position: fixed;
    z-index: 999999999999999999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/imgs/overlay.png');
    background: rgb(0,0,0);
    background: transparent\9;
    background: rgba(0,0,0,0.4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}

    .loading > div {
        background: #fff;
        padding: 20px;
        margin-top: 20%;
        display: inline-block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 0 5px #555;
        box-shadow: 0 0 5px #555;
    }

/ * Emojionearea.js overrides */
.emojionearea .emojionearea-editor {
    color: #000 !important;
}

img.emojione {
    width: 20px;
    height: 20px;
}

/* Background colour smooth change */
input, a, select, .pure-table, .pure-table * {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
}

.ui-accordion-header {
    -webkit-transition: font-size 30ms linear;
    -moz-transition: font-size 30ms linear;
    -o-transition: font-size 30ms linear;
    -ms-transition: font-size 30ms linear;
    transition: font-size 30ms linear;
}

.handle {
    cursor: pointer;
    padding: 3px;
}

    .handle.handle-open:before {
        content: '\229d';
    }

    .handle.handle-closed:before {
        content: '\2295';
    }

.signature {
    background: #fff;
    max-width: 700px;
}


.pure-paginator-container {
    text-align: right;
}

/* Radio and CheckBox*/
input[type=checkbox] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

input[type=radio] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Hide page content until DOM loaded to prevent JS flicker */
.page-loading #page-content {
    visibility: hidden;
    opacity: 0;
}

.page-loaded #page-content {
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0s, opacity 0.1s linear;
    -moz-transition: visibility 0s, opacity 0.1s linear;
    -o-transition: visibility 0s, opacity 0.1s linear;
    -ms-transition: visibility 0s, opacity 0.1s linear;
    transition: visibility 0s, opacity 0.1s linear;
}

.page-loading {
    background: url('/imgs/loading-large.gif') no-repeat center center;
    background-attachment: fixed;
}

.tread-commercial-show {
    visibility: visible;
}

.tread-commercial-hide {
    visibility: hidden;
    display: none;
}

.buttonHeight {
    height: 2em;
}

.not-allowed:hover {
    cursor: not-allowed !important;
}

#floating-alerts {
    position: fixed;
    bottom: 50px;
    right: 0;
    padding: 10px 0 10px 0;
}

    #floating-alerts .floating-alert {
        width: 300px;
        background: #f1f1f1;
        color: #000;
        border-radius: 5px 0 0 5px;
        padding: 6px 4px 6px 4px;
        margin-top: 10px;
        -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
    }

        #floating-alerts .floating-alert.warning {
            background: #ca3c3c;
            color: white !important;
        }

        #floating-alerts .floating-alert.info {
            background: #df7514;
            color: white !important;
        }

        #floating-alerts .floating-alert img {
            margin: 5px;
        }


video {
    width: 100% !important;
    height: auto !important;
}

.videoWrapper {
    width: 100% !important;
    margin: auto !important;
    text-align: center !important;
    padding: 0;
}

#video-dialog.ui-dialog-content {
    overflow-y: hidden !important;
}

#progress-wrp {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    border-radius: 3px;
    margin: 10px;
    text-align: left;
    background: #fff;
    box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

    #progress-wrp .progress-bar {
        height: 20px;
        border-radius: 3px;
        background-color: #f39ac7;
        width: 0;
        box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
    }

    #progress-wrp .status {
        top: 3px;
        left: 50%;
        position: absolute;
        display: inline-block;
        color: #000000;
    }

@-ms-keyframes wiggle {
    0% {
        -ms-transform: rotate(18deg);
    }

    4% {
        -ms-transform: rotate(-18deg);
    }

    8% {
        -ms-transform: rotate(18deg);
    }

    12% {
        -ms-transform: rotate(-18deg);
    }

    16% {
        -ms-transform: rotate(18deg);
    }

    20% {
        -ms-transform: rotate(-18deg);
    }

    22% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(0deg);
    }
}

@-moz-keyframes wiggle {
    0% {
        -moz-transform: rotate(18deg);
    }

    4% {
        -moz-transform: rotate(-18deg);
    }

    8% {
        -moz-transform: rotate(18deg);
    }

    12% {
        -moz-transform: rotate(-18deg);
    }

    16% {
        -moz-transform: rotate(18deg);
    }

    20% {
        -moz-transform: rotate(-18deg);
    }

    22% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes wiggle {
    0% {
        -webkit-transform: rotate(18deg);
    }

    4% {
        -webkit-transform: rotate(-18deg);
    }

    8% {
        -webkit-transform: rotate(18deg);
    }

    12% {
        -webkit-transform: rotate(-18deg);
    }

    16% {
        -webkit-transform: rotate(18deg);
    }

    20% {
        -webkit-transform: rotate(-18deg);
    }

    22% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes wiggle {
    0% {
        transform: rotate(18deg);
    }

    4% {
        transform: rotate(-18deg);
    }

    8% {
        transform: rotate(18deg);
    }

    12% {
        transform: rotate(-18deg);
    }

    16% {
        transform: rotate(18deg);
    }

    20% {
        transform: rotate(-18deg);
    }

    22% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.shake {
    -ms-animation: wiggle;
    -moz-animation: wiggle;
    -webkit-animation: wiggle;
    animation: wiggle;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 8s;
    -webkit-animation-duration: 5s;
}

@media only screen and (max-width:1560px) {
    .full-cal-ajax {
        width: 90%;
    }
}

@media only screen and (max-width:1350px) {
    .full-cal-ajax {
        width: auto;
    }
}

@media only screen and (max-width:1250px) {
    #dashboard > div {
        width: 100%;
    }

        #dashboard > div:first-child {
            float: right;
            margin-bottom: 30px;
        }

        #dashboard > div > div, #dashboard > div > div > div {
            padding: 0;
            border-width: 0 !important;
        }

    .header-lft > img {
        max-width: 300px;
    }
}

@media only screen and (max-width:1230px) {
    .full-cal-ajax-header {
        font-size: 0.9em;
    }
}

@media only screen and (max-width:1100px) {
    .header-md {
        display: table;
        width: 100%;
    }

        .header-md img {
            max-width: 100%;
        }

        .header-md > div {
            display: table-cell;
            padding: 15px;
        }

            .header-md > div:first-child + div {
                text-align: right;
            }

    .header-lft, .header-lg-logo {
        display: none;
    }

    .header-rgt {
        padding-top: 0;
    }

    .welcome-area {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }

    .full-cal-ajax-header:after {
        content: '';
        display: table;
        clear: both;
    }

    .full-cal-ajax-header > div {
        float: left;
        box-sizing: border-box;
    }

    .full-cal-ajax-header .cal-goto, .full-cal-ajax-header .cal-counts {
        width: 40%;
    }

    .full-cal-ajax-header .cal-filters, .full-cal-ajax-header .cal-hours {
        width: 60%;
    }

    .full-cal-ajax-header .cal-filters, .full-cal-ajax-header .cal-goto {
        height: 35px;
    }

    .full-cal-ajax-header .cal-counts, .full-cal-ajax-header .cal-hours {
        margin-bottom: 0 !important;
    }

    .full-cal-ajax-header .cal-counts {
        text-align: left;
    }

    .full-cal-ajax-header .cal-goto * {
        width: auto !important;
    }

    .full-cal-ajax-header .cal-goto > div {
        display: inline-block;
    }

    .full-cal-ajax-header .cal-filters div {
        display: inline-block;
    }
}

@media only screen and (max-width:1024px) {
    /* Responsive table */
    table.responsive-table, div.table {
        overflow-x: auto;
        display: block;
    }

        table.responsive-table thead, table.responsive-table tbody {
            width: 100%;
        }

        table.responsive-table ul.pure-paginator {
            position: absolute;
            right: 0;
            margin-top: 2.2em;
            margin-right: 1.4em;
        }

    .pure-paginator-container {
        height: 0px;
    }
}

@media only screen and (max-width:950px) {
    html, body {
        font-size: 0.9em;
    }

    .header-rgt {
        font-size: 1em;
    }

    .page-menu-block {
        float: none;
        display: block;
        margin: 0 0 10px 0;
        text-align: center;
    }
}

@media only screen and (max-width:850px) {
    .pure-table {
        font-size: 0.9em;
    }
}

@media only screen and (max-width:800px) {
    .full-cal-ajax-header, .full-cal-ajax-header > div {
        float: none;
        display: block;
        width: auto !important;
    }

        .full-cal-ajax-header > div {
            text-align: center !important;
            padding-right: 0 !important;
            margin-bottom: 10px !important;
            height: auto !important;
        }

        .full-cal-ajax-header .cal-counts {
            margin-bottom: 10px !important;
        }

        .full-cal-ajax-header > div:last-child {
            margin-bottom: 0 !important;
        }

        .full-cal-ajax-header .cal-goto a.pure-button {
            margin-top: 0;
        }
}

@media only screen and (max-width:767px) {
    #frm > .p20 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wmd80 {
        width: 80%;
    }

    .wmd100 {
        width: 100%;
    }

    .mlmd0 {
        margin-left: 0 !important;
    }

    .mrmd0 {
        margin-right: 0 !important;
    }

    .blockmd {
        display: block;
    }
}



@media screen and (max-width: 48em) {
    .pure-u-0 {
        display: none;
    }
}

@media screen and (min-width: 48em) {
    .pure-u-md-0 {
        display: none;
    }
}






/* Modal dialogs responsive heights */
@media ( min-height: 200px ) {
    .ui-dialog-content, .dialog-content {
        max-height: 150px !important;
        overflow-y: auto;
    }
}

@media ( min-height: 330px ) {
    .ui-dialog-content, .dialog-content {
        max-height: 280px !important;
        overflow-y: auto;
    }
}

@media ( min-height: 600px ) {
    .ui-dialog-content, .dialog-content {
        max-height: 550px !important;
        overflow-y: auto;
    }
}

@media ( min-height: 720px ) {
    .ui-dialog-content, .dialog-content {
        max-height: 680px !important;
        overflow-y: auto;
    }
}

@media ( min-height: 900px ) {
    .ui-dialog-content, .dialog-content {
        max-height: 850px !important;
        overflow-y: auto;
    }
}

/* Dashboard MultiSelect Dropdown Style */
.dash-multiselect .multi-select {
    float: right;
    width: 100%;
    position: relative;
}

.dash-multiselect .bg-input {
    width: 100%;
}

.cal-filters select {
    margin-bottom: 5px !important;
}

.filters_content {
    border: 1px solid #cbcbcb !important;
    border-radius: 0px 0px 5px 5px;
    display: none;
    padding: 10px;
    margin-top: -1px;
    position: absolute;
    background: #ffffff;
    box-sizing: border-box;
}

.collapsible_container {
    position: relative;
    cursor: pointer;
}

.collapsible {
    cursor: pointer;
    padding: 6px 0 0 6px;
    margin: 0px;
    position: relative;
    box-sizing: border-box;
    height: 30px;
}

.full-cal-ajax-header .cal-filters {
    z-index: 999;
    width: 30%;
}

.full-cal-ajax-header .cal-counts {
    position: relative;
    letter-spacing: normal !important;
}

.collapsible_container .pure-input-1 {
}

.cal-filters .collapsible.open:before {
    content: '\02296';
    margin-right: 5px;
}

.cal-filters .collapsible.closed:before {
    content: '\02295';
    margin-right: 5px;
}

.full-cal-ajax-header-wrapper {
    position: relative;
}

.full-cal-ajax-header > div {
    padding-right: 0px;
}

.totals-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    box-shadow: 5px -5px #0078e7;
    z-index: 999;
    padding-bottom: 10px;
}

/* CSS Necessary for the TimePicker custom user control to render and work properly*/
/* TimePicker Section START*/

.timepicker .bg-input:after {
    content: '';
}

.timepicker .bg-input {
    margin: 0 !important;
}

.timepicker-textbox {
    border: 0px !important;
    padding: 0px !important;
    width: 50px !important;
    height: 20px;
    outline: none;
    box-shadow: none !important;
    background-color: white;
}

    .timepicker-textbox:disabled {
        background-color: white !important;
    }

.timepicker-label {
    display: block;
    text-align: left;
    margin-left: 10px;
}

    .timepicker-label:hover {
        color: white;
    }

.timepicker-btndropdown:hover, .timepicker-timelistpanel:hover {
    cursor: pointer;
}

.timepicker-timelistpanel {
    position: absolute !important;
    top: 33px;
    background-color: white;
    border: thin solid cornflowerblue;
    width: 80px;
    z-index: 2147483638;
    height: 200px;
    overflow-y: auto;
}

.timepicker-reduced-height .timepicker-timelistpanel {
    height: 100px;
}

.timepicker-label-container:hover {
    background-color: cornflowerblue;
}
/*TimePicker Section END*/

/*Technician State Manual Adjustment START*/
.checkedout {
    /*opacity:0.7;*/
    background-color: cornflowerblue;
}
/*Technician State Manual Adjustment END*/

.textboxlikelabel {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0px 0px 0px 0px !important;
    box-shadow: none !important;
}

/*ECP Dialogue START*/
#divECPPanel {
    background-color: #eee !important;
}

    #divECPPanel .container {
        border-radius: 5px;
        box-shadow: 0 1px 3px 0 #333;
        background-color: #fff;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 9px 20px 15px;
        box-sizing: border-box;
        margin: 0 2px;
    }

    #divECPPanel .header h2 {
        font-size: 18px;
        color: #004899;
        margin-bottom: 0;
        text-align: left;
    }

    #divECPPanel .header .vehicle-details {
        padding-top: 5px;
        text-align: left;
    }

    #divECPPanel .header label {
        display: inline-block;
        font-weight: 600;
        width: 90px;
    }

        #divECPPanel .header label + div {
            display: inline-block;
        }

    #divECPPanel .header #imgVehicle {
        max-height: 70px;
    }

    #divECPPanel .header .search {
        border: 1px solid #928bae;
        border-radius: 5px;
        padding: 1px;
        margin-top: 15px;
    }

        #divECPPanel .header .search input[type=search] {
            border: 0 !important;
            padding: 0 10px;
            outline: none;
            height: 40px;
        }

        #divECPPanel .header .search input[type=button] {
            background-color: transparent;
            background-image: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgMjAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjMDA0ODk5IiBkPSJNMTQuMywxMi42aC0wLjlsLTAuMy0wLjNjMS4xLTEuMywxLjgtMywxLjgtNC44YzAtNC4xLTMuMy03LjQtNy40LTcuNEMzLjMsMCwwLDMuMywwLDcuNAoJYzAsNC4xLDMuMyw3LjQsNy40LDcuNGMxLjgsMCwzLjUtMC43LDQuOC0xLjhsMC4zLDAuM3YwLjlsNS43LDUuN2wxLjctMS43TDE0LjMsMTIuNnogTTcuNCwxMi42Yy0yLjgsMC01LjEtMi4zLTUuMS01LjEKCWMwLTIuOCwyLjMtNS4xLDUuMS01LjFzNS4xLDIuMyw1LjEsNS4xQzEyLjYsMTAuMywxMC4zLDEyLjYsNy40LDEyLjZ6Ii8+Cjwvc3ZnPgo=);
            background-repeat: no-repeat;
            background-position: center;
            border: 0 !important;
            width: 40px;
            height: 40px;
            vertical-align: top;
        }

    #divECPPanel .header .ecp-logo {
        height: 60px;
    }

    #divECPPanel .header .top-searches ul, #divECPPanel #ECPPartsTree ul {
        list-style-type: none;
        padding: 0;
        margin: 4px 0 0 0;
        text-align: left;
    }

        #divECPPanel .header .top-searches ul li, #divECPPanel #ECPPartsTree ul li {
            width: 120px;
            background: url(https://omnipart.eurocarparts.com/assets/images/icons/ecp-icon-arrow-link.svg) top left no-repeat;
            display: inline-block;
            background-position-y: 5px;
            padding: 0 0 4px 10px;
        }

            #divECPPanel .header .top-searches ul li a, #divECPPanel #ECPPartsTree ul li a {
                text-decoration: none;
                padding: 0;
            }

    #divECPPanel li a {
        color: #004899;
    }

    #divECPPanel #ECPPartsTree > ul > li > a {
        font-size: 120%;
        font-weight: bold;
        color: #004899
    }

    #divECPPanel #ECPPartsTree > ul > li ul a.ui-accordion-header-active, #divECPPanel #ECPPartsTree .leaf-node.active {
        font-weight: bold;
    }


    #divECPPanel #ECPPartsTree .ui-accordion-header-icon {
        display: none;
    }

    #divECPPanel li a {
        color: #004899;
    }

    #divECPPanel #ECPPartsTree > ul > li > a {
        font-size: 120%;
        font-weight: bold;
        color: #004899
    }

    #divECPPanel #ECPPartsTree > ul > li ul a.ui-accordion-header-active, #divECPPanel #ECPPartsTree .leaf-node.active {
        font-weight: bold;
    }

    #divECPPanel #ECPPartsTree .ui-accordion-header-icon {
        display: none;
    }

    #divECPPanel #divResult {
        height: 400px;
        overflow-x: hidden;
        width: 839px;
        vertical-align: top;
        padding: 0;
        margin-left: 10px;
    }

    #divECPPanel #divResults.results-loading {
        background: url(/imgs/ecp-loading.gif) 50% 50% no-repeat;
        height: 265px;
        display: block;
    }

    #divECPPanel .part-result-container {
        display: table;
        border-bottom: 8px solid #e5e5e5;
        color: #004899;
    }

        #divECPPanel .part-result-container .codedpart {
            border-right: 1px solid #f5f5f5;
            text-align: left;
        }


        #divECPPanel .part-result-container .groupedcodedproducts {
            display: table-cell;
            vertical-align: top;
            border-right: 1px solid #e5e5e5;
            padding: 4px 8px;
            width: 580px;
        }

            #divECPPanel .part-result-container .groupedcodedproducts .main-header {
                display: block;
                width: 100%;
            }

        #divECPPanel .part-result-container .ECPProductSelectGroup {
            display: table-cell;
            width: 212px;
        }

.ECPProductselect {
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    display: table;
}

    .ECPProductselect .price {
        font-size: 18px;
        color: #004899;
        display: table-cell;
        width: 100px;
        font-weight: 700;
        padding: 8px 15px;
        box-sizing: border-box;
        text-align: left;
    }

    .ECPProductselect.selected .price {
        color: #fff;
    }

    .ECPProductselect .brand {
        background: #fff;
        display: table-cell;
        width: 112px;
        text-align: center;
        vertical-align: middle;
    }

        .ECPProductselect .brand img {
            height: 30px;
        }

    .ECPProductselect.selected {
        background-color: #004899;
    }

.ECPPartInfoTable td {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
}

.ECPPartInfoTable tr:nth-child(odd) {
    background-color: #eee;
}

.ecp-search {
    cursor: pointer;
}
/*ECP Dialogue END*/


fieldset.quickbooks {
    border-color: #2C9F1C !important;
}

    fieldset.quickbooks legend {
        border: 1px solid #2c9f1c !important;
        background-color: #ddd !important;
        color: #fff !important;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: -11px;
    }

.pure-button.tyre-icon {
    background-image: url('/imgs/icon-tyre.png');
    background-position: 16px 8px;
    background-repeat: no-repeat;
    height: 18px;
    width: 32px;
}

.pure-button.e3-icon {
    background-image: url('/imgs/haynes-pro-logo.png');
    background-position: 13px 6px;
    background-repeat: no-repeat;
    height: 17px;
    width: 80px;
    background-size: 80%;
}

.pure-button.autodata-icon {
    background-image: url('/imgs/autodata-api-logo.png');
    background-position: 10px 7px;
    background-repeat: no-repeat;
    height: 17px;
    width: 80px;
    background-size: 80%;
}

/*Front and Rear Tyre Images with Tyre Size info*/
/*tyre curve*/
.tyre {
    position: relative;
    width: 200px;
    height: 78px;
    background: url('/imgs/tyresize.png') top center no-repeat;
    margin: 0 auto;
}

    .tyre > .name {
        position: absolute;
        bottom: 6px;
        width: 100%;
        text-align: center;
        font-size: 140%;
    }

    .tyre span {
        position: absolute;
        bottom: 0;
        width: 50px;
        height: 70px;
        margin-left: 74px;
        text-align: center;
        transform-origin: bottom center;
        font-size: 120%;
        color: #fff;
    }

    .tyre .width {
        transform: rotate(-62deg);
        height: 84px;
        margin-bottom: -10px;
    }

    .tyre .width-sep {
        transform: rotate(-45deg);
        height: 77px;
        margin-bottom: -3px;
    }

    .tyre .ratio {
        transform: rotate(-20deg);
        height: 69px;
        margin-left: 65px;
    }

    .tyre .ratio-sep {
        transform: rotate(-5deg);
        height: 71px;
    }

    .tyre .diameter {
        transform: rotate(13deg);
        height: 70px;
        margin-left: 80px;
    }

    .tyre .load-rating {
        transform: rotate(40deg);
        height: 71px;
        margin-left: 85px;
        margin-bottom: -2px;
    }

    .tyre .speed-rating {
        transform: rotate(61deg);
        height: 88px;
        margin-bottom: -14px;
    }



/* Vehicle Visuals START*/
#divVVPanel.player-mode .vv-menu, #divVVPanel.player-mode .vv-select {
    display: none;
}

#divVVPanel.player-mode .vv-results {
    width: 100%;
}

#divVVPanel .container {
    border-radius: 5px;
    box-shadow: 0 1px 3px 0 #333;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 15px;
    box-sizing: border-box;
    margin: 5px;
    letter-spacing: normal !important;
    height: 580px;
    vertical-align: top;
    display: block;
    position: relative;
}

#divVVPanel #animationTree ul li a {
    text-decoration: none;
    padding: 0;
}

#divVVPanel .search-result-thumbnail {
    max-height: 50px;
}

#divVVPanel .search-result {
    text-align: left;
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid grey;
    vertical-align: text-top;
}

    #divVVPanel .search-result a {
        color: inherit !important;
        vertical-align: top;
        margin-left: 10px;
    }

#divVVPanel .search-result-text {
    color: inherit !important;
    display: inline-block;
    vertical-align: text-top;
    max-width: 90%;
}

#divVVPanel #animationTree .ui-icon-triangle-1-e, #divVVPanel #animationTree .ui-icon-triangle-1-s {
    position: static;
    margin-right: 3px;
}

#divVVPanel #animationTree.ui-accordion li, #divVVPanel #vvSaved li {
    list-style-type: none;
    padding: 2px 0;
}

    #divVVPanel #animationTree.ui-accordion li:hover, #divVVPanel #vvSaved li:hover {
        background-color: #f1f1f1
    }

#divVVPanel #animationTree .childless {
    margin-top: 8px;
    margin-bottom: -7px;
    padding-left: 35px;
    cursor: pointer;
}

    #divVVPanel #animationTree .childless.active {
        font-size: 120%;
    }

#divVVPanel #animationTree .children, #divVVPanel #vvSaved ul {
    padding-left: 15px;
}

#divVVPanel #animationTree .child > img, #divVVPanel #vvSaved li > div > img {
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
}

#divVVPanel #animationTree .child > a, #divVVPanel #vvSaved li > a {
    overflow: hidden;
}

.centered-paragraph {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: gray;
}

#divVVPanel #animationTree {
    background: #f9f9f9;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(249, 249, 249);
    border: 1px solid #e5e5e5;
}


    #divVVPanel #animationTree > h4 {
        background: #f1f1f1;
        background-image: initial;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: rgb(241, 241, 241);
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0;
    }
/* Vehicle Visuals END*/


/*Haynes E3 Start */
.e3-dialogue .group-menu {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    margin-bottom: 5px;
    height: 100%;
}

    .e3-dialogue .group-menu h3 {
        background: #e5e5e5;
        margin: 0 !important;
        padding: 5px !important;
    }

        .e3-dialogue .group-menu h3 img {
            height: 25px;
            margin: 0 5px 0 0;
            vertical-align: middle;
        }

    .e3-dialogue .group-menu a {
        display: block;
        text-decoration: none;
        color: #000;
        padding: 4px 8px;
        border: 0 !important;
    }

        .e3-dialogue .group-menu a:hover {
            background: #e5e5e5;
        }

        .e3-dialogue .group-menu a:before {
            content: '\25b6';
            margin-right: 5px;
        }

        .e3-dialogue .group-menu a:hover:before {
            margin-right: 10px;
        }

.e3-dialogue .veh-image img {
    width: 100%;
}

.e3-dialogue #divAction .accordion h4 + div {
    padding: 0;
}

.e3-dialogue #quick-links > div {
    margin-top: -10px;
}

.e3-dialogue #quick-links a {
    display: block;
    padding: 3px 0;
}

    .e3-dialogue #quick-links a img {
        height: 16px;
        margin: 0 5px 0 0;
        vertical-align: middle;
    }

    .e3-dialogue #quick-links a:hover img {
        margin-right: 8px;
    }

.e3-dialogue #divRight {
    width: 99%;
    height: 480px;
    margin-left: 6px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
}

.e3-dialogue #divLeft {
    width: 100%;
    height: 480px;
    background-color: white;
}

.e3-dialogue #divSearchResults {
    padding: 4px;
}

    .e3-dialogue #divSearchResults .thumb-img {
        padding: 4px;
        margin: 5px 0;
        border: 1px solid #e0e0e0;
        border-radius: 3px;
        background: #fff;
        display: inline-block;
        text-align: center;
    }

        .e3-dialogue #divSearchResults .thumb-img.small img {
            width: 20px;
            height: 20px;
            padding: 1px;
        }

        .e3-dialogue #divSearchResults .thumb-img.large img {
            max-width: 400px;
            max-height: 300px;
        }

        .e3-dialogue #divSearchResults .thumb-img img {
            max-width: 250px;
            max-height: 150px;
            vertical-align: middle;
            height: auto;
            width: auto;
        }

.e3-dialogue #divShowWait {
    width: 93%;
    background-color: #fff;
    position: absolute;
}

.e3-result-content {
    display: block;
}

.e3-group-subjects {
    margin-top: 10px;
}

    .e3-group-subjects a {
        display: block;
        text-align: left;
        margin-left: 2px;
    }

#divE3Panel .e3-srv-header {
    font-weight: bold;
    padding: 12px 2px;
    text-align: center;
}

    #divE3Panel .e3-srv-header h3 {
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

.e3-fixed-header {
    background: #e6ecf2;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}

    .e3-fixed-header input[type="button"] {
        margin: 4px;
    }

.results-loading {
    background: url(/imgs/loading-large.gif) 50% 50% no-repeat;
    height: 480px;
    display: block;
}

.e3-result-content {
    padding: 0 4px;
}
/* E3 END*/



/* Vehicle */
.job-with-vehicle .job-vehicle {
    width: 42%;
    display: inline-block;
    float: left;
}

.job-with-vehicle .job-details {
    width: 58%;
    display: inline-block;
}

.job-without-vehicle .job-vehicle {
    width: 0%;
    display: inline-block;
}

.job-without-vehicle .job-details {
    width: 100%;
    display: inline-block;
}


/* Estimates */
.estimate-with-vehicle .estimate-vehicle {
    width: 60%;
    display: inline-block;
    float: left;
}

.estimate-with-vehicle .estimate-details {
    width: 30%;
    display: inline-block;
}

.estimate-without-vehicle .estimate-vehicle {
    width: 0%;
    display: inline-block;
}

.estimate-without-vehicle .estimate-details {
    width: 100%;
    display: inline-block;
}

#cbn-event-detail-vehicle #txtKeyTagNumber {
    font-size: 14px;
    font-weight: bold;
}

.sub-editable {
    border: 1px solid transparent !important;
    background: none !important;
    box-shadow: none !important;
}

    .sub-editable:hover, .sub-editable:focus {
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        background-color: rgba(255,255,255,0.3) !important;
        box-shadow: initial !important
    }

    .sub-editable.in-progress, select.in-progress {
        background-image: url('/imgs/loading-small.gif') !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        pointer-events: none;
        opacity: 0.6;
    }




.kpi-tile {
    padding: 2px;
    border: 1px solid #bbb;
    border-radius: 4px;
    margin: 0 2px;
    background-color: #eee;
    display: block;
}

    .kpi-tile .title {
        font-weight: bold;
        text-align: center;
    }

    .kpi-tile > .title {
        display: block;
    }

    .kpi-tile > .value {
        display: block;
        text-align: center;
        font-size: 130%;
        padding: 4px 0;
    }

    .kpi-tile .values {
        display: block;
    }

        .kpi-tile .values > div > span {
            font-size: 130%;
            padding: 0 4px;
        }

    .kpi-tile .comparison {
        display: block;
        text-align: center;
        font-size: 90%;
        bottom: 0;
        width: 100%;
        padding-bottom: 2px;
    }

        .kpi-tile .comparison > .title, .kpi-tile .comparison > .value {
            display: inline-block;
        }

            .kpi-tile .comparison > .value span {
                padding: 0 4px;
            }

    .kpi-tile .allowed {
        font-size: 70%;
        margin-left: 8px;
    }

    .kpi-tile.negative {
        border-color: #fb3737;
    }

        .kpi-tile.negative > .value {
            color: #fb3737;
        }

.pure-button.btn-delete-all {
    float: left;
    padding: 7px 17px;
    margin: 0 5px;
}

a.view-job {
    text-decoration: none;
}

@media only screen and (max-width: 600px) {
    .responsive-div {
        display: flex;
        flex-direction: column;
    }

    .responsive-ddl {
        width: auto;
    }

    .responsive-del-btn {
        width: 17px;
    }

    .responsive-btn {
        white-space: normal !important;
        word-break: break-word;
    }

    .responsive-position {
        position: relative;
        top: 3px;
    }

    .notificationSlide-div {
        display: flex;
        flex-direction: column;
    }
}

.disable-link {
    pointer-events: none;
    opacity: 0.6;
}

.notification {
    color: #fff;
    text-decoration: none;
    position: relative;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

    .notification img {
        vertical-align: middle;
        padding: 3px 5px;
        border-radius: 4px;
    }

    .notification:hover img {
        background-color: #ccc;
    }

    .notification .badge {
        position: relative;
        top: -8px;
        margin-left: -10px;
        font-size: 90%;
        padding: 1px 5px;
        display: inline-block;
        background-color: #ff4747;
        color: #fff !important;
    }

#notificationSlide {
    visibility: inherit;
    background-color: white;
    border-radius: 2px;
    position: fixed;
    z-index: 10000;
    top: 1px;
    right: 1px;
}

.hideSlide {
    opacity: 0;
}

#notificationSlide > fieldset {
    background-color: #3176aa;
    height: 30px;
    margin: 0;
}

    #notificationSlide > fieldset > div > span {
        color: white;
    }

.bg-notification {
    color: #000 !important;
    border: 2px solid rgba(0,0,0,0.2) !important;
    background-color: #fff !important;
    width: 200px;
    height: 30px;
    font-size: small;
}

    .bg-notification:hover {
        background-color: #f6f6f6 !important;
    }


.alert-box {
    background: #ddd;
    width: 450px;
    word-break: break-word;
    border: 5px solid #ffff;
}

    .alert-box > div > strong {
        float: left;
    }

    .alert-box .para-cust {
        width: 100%;
        background: #ffff;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .alert-box .hr-cust {
        border: 0;
        border-top: 1px solid #ccc;
        display: block;
        background: none !important;
        margin-bottom: 8px !important;
        margin-top: 8px !important;
    }

    .alert-box .reg-alert {
        background: url('../imgs/template/reg-bg.png') no-repeat;
        width: 100px;
        height: 23px;
        background-size: 100px 20px;
        font-size: .75em;
        font-weight: bold;
        padding-top: 2px;
        text-align: center;
        margin-top: 1px;
        display: inline;
        float: left;
    }

    .alert-box .bottom-btns {
        clear: both;
        margin-bottom: 0 !important;
    }

    .alert-box .inline {
        display: inline;
        float: left;
    }

.slide-background-grayout {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #888;
    opacity: 0.5;
    z-index: 9999;
}

    .slide-background-grayout.visible {
        display: block;
    }

.ui-dialog-buttonpane-toast {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 22px;
}

    .ui-dialog-buttonpane-toast button {
        border: none;
        background: none;
    }

.hover-pinned {
    opacity: .5;
}

    .hover-pinned:hover {
        opacity: 1;
    }

input:disabled::-webkit-input-placeholder { /* WebKit Browsers */
    opacity: 0;
}

input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    opacity: 0;
}

input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
    opacity: 0;
}

input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
    opacity: 0;
}

/********************* Country Code Styles *************/
.ipt-vrm {
    border-radius: 4px;
    background: rgb(253,192,12);
    background: linear-gradient(0deg, rgba(253,192,12,1) 0%, rgba(255,214,93,1) 100%);
    box-shadow: 0 0 0 1px black;
    white-space: nowrap;
    width: 180px;
    display: flex;
}

    .ipt-vrm .ipt-vrm-dyn {
        display: flex;
        height: 100%;
    }

.ipt-vrm-dyn .handle-vrm div img {
    margin: 10% auto 3% auto;
}

.ipt-vrm-dyn .handle-vrm div div ul li img {
    margin: 0;
}

.ipt-vrm-dyn .handle-vrm {
    width: 36px;
    background-color: var(--reg-lookup);
    display: flex;
    flex-direction: column;
    padding: 0px 4px;
    position: relative;
}

    .ipt-vrm-dyn .handle-vrm div {
        text-align: center;
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }

    .ipt-vrm-dyn .handle-vrm .no-after:after {
        content: none !important;
    }

/* vehicle reg input text */
.ipt-vrm, .ipt-vrm-dyn input[type='text'] {
    font-family: Ubuntu;
    font-size: 1.3em;
    line-height: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
}

.ipt-vrm-dyn input[type='text'] {
    background: none;
    border: none;
    outline: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    font-size: 1.0em;
    line-height: 1.1em;
}

.ipt-vrm-dyn .handle-vrm ul {
    display: none;
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #E6E6E6 !important;
    color: #000;
    border: solid 1px #d8d8d8;
}

    .ipt-vrm-dyn .handle-vrm ul li {
        background: #fff;
        padding: 3px 5px 3px 5px;
        cursor: pointer;
        text-align: left;
        font-size: initial;
        font-weight: initial;
        text-transform: none;
        z-index: 9999
    }

        .ipt-vrm-dyn .handle-vrm ul li:hover {
            background: #3176aa;
            color: #fff;
        }

        .ipt-vrm-dyn .handle-vrm ul li img {
            max-height: 18px;
            vertical-align: text-bottom;
        }

.ipt-vrm-dyn .handle-vrm:hover ul {
    display: block !important;
    position: absolute;
    min-width: fit-content;
    bottom: -72px;
}

.ipt-incv-dyn {
    position: relative;
    width: 30px;
    height: 32px;
    display: inline;
    float: right;
}

    .ipt-incv-dyn:before {
        width: 20%;
    }

    .ipt-incv-dyn .handle-incv {
        width: 20%;
        vertical-align: top;
        z-index: 999;
        position: absolute;
        left: 0;
    }

        .ipt-incv-dyn .handle-incv div {
            height: 100%;
            width: 100%;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

            .ipt-incv-dyn .handle-incv div img {
                height: 50%;
                margin: 10% auto 3% auto;
            }

            .ipt-incv-dyn .handle-incv div:after {
                display: block;
                content: '';
                width: 0;
                height: 0;
                border-left: 14px solid transparent;
                border-right: 14px solid transparent;
                border-top: 4px solid #000000;
                margin: 2px auto 0 auto;
            }

        .ipt-incv-dyn .handle-incv .no-after:after {
            content: none !important;
        }

        .ipt-incv-dyn .handle-incv ul {
            display: none;
            position: absolute;
            list-style-type: none;
            margin: 0;
            padding: 0;
            background: #E6E6E6 !important;
            color: #000;
            border: solid 1px #d8d8d8;
            width: 8vw
        }

            .ipt-incv-dyn .handle-incv ul li {
                background: #fff;
                padding: 3px 5px 3px 5px;
                cursor: pointer;
                text-align: left;
                font-size: initial;
                font-weight: initial;
                text-transform: none;
                z-index: 9999
            }

                .ipt-incv-dyn .handle-incv ul li:hover {
                    background: #3176aa;
                    color: #fff;
                }

                .ipt-incv-dyn .handle-incv ul li img {
                    max-height: 18px;
                    vertical-align: text-bottom;
                }

        .ipt-incv-dyn .handle-incv:hover ul {
            display: block !important;
        }

/********************* Country Code Styles Ends *************/

/*********** Jan 2025 addtions ***********/
#month-day-view-controls {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-content: center;
    justify-content: center;
    gap: 0.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid lightgrey;
}

.cbn-toolbar .parts-bar-button {
    display: flex !important;
    justify-content: center;
    background-color: #ffffff !important;
    border: 1px solid lightgrey;
    border-radius: 4px;
}

#month-day-view-controls .cbn-view-select {
    letter-spacing: normal;
    align-content: baseline;
}

/* Jobs page change */
.pure-g .search-filters-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .pure-g .search-filters-box .search-filter-item {
    }

fieldset .job-detail-car-info-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

fieldset .job-details-reg-lookup-controls {
    display: flex;
    column-gap: 0.5rem;
}

fieldset .job-info-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#PageContent_btnAddNote {
    background-color: var(--blue-primary) !important;
}

.quote-intergration-buttons {
    background-color: #ffffff !important;
    border: 1px solid lightgrey;
    border-radius: 2px;
}

.dual-input-box {
    display: flex;
    flex-direction: row;
}

.first-of-dual-input-box {
    display: flex;
    flex-direction: column;
}

.second-of-dual-input-box {
}

.reg-lookup-buttons {
    display: flex;
    justify-content: center;
    gap: 1em;
}

/*********** Jan 2025 addtions Ends ***********/
#reg-drop-down-arrow {
    height: 50%;
    padding: 0;
    margin: -4px 0px;
}

.tabs-body {
    letter-spacing: normal;
}

/* Techman classic support */
.cbn-toolbar-classic {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 0.5rem 0rem;
    gap: 0.25rem;
    width: 100%;
}

    .cbn-toolbar-classic .parts-bar-button {
        display: flex !important;
        justify-content: center;
        background-color: #ffffff !important;
        border: 1px solid lightgrey;
        border-radius: 4px;
        min-width: 60px;
        align-items: center;
        height: 42px;
        padding: 0px 4px;
    }

    .cbn-toolbar-classic .cbn-reg-lookup-classic {
        margin: 0rem 0.5rem 0rem 0.5rem;
        border-radius: 4px;
        background-color: #003399;
        display: inline-flex;
        align-items: center;
        height: 42px;
    }

.link-button-image {
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

.cbn-toolbar-classic > #PageContent_RecentRegistrationSearches_btnCollapse {
    height: 44px;
}


.new-estimates-panel {
    display: flex;
    column-gap: 1em;
}

.new-estimates-sub-panel {
    max-width: fit-content;
}

    .new-estimates-sub-panel > h3 {
        padding: 5px;
    }

.new-estimates-toolbar-panel {
    display: flex;
    column-gap: 0.5em;
    padding-top: 16px;
    padding-bottom: 4px;
}

.new-estimates-customer-details {
    display: flex;
    column-gap: 0.5em;
}

    .new-estimates-customer-details > .new-estimates-input-divs {
        display: flex;
        flex-direction: column;
        max-width: fit-content;
        justify-content: space-between;
    }

        .new-estimates-customer-details > .new-estimates-input-divs > .contact-boxes {
            display: flex;
            flex-direction: row;
            column-gap: 0.25em;
        }

.flex-box {
    display: flex !important;
}

.status-color-bar {
    padding-left: 4px;
    margin-left: 2px;
    border-radius: 2px;
}

.cbn-event-vehicle {
    display: flex;
}

.job-details-buttons {
    display: flex;
    flex-direction: row;
    max-height: 2rem;
    column-gap: 0.5rem;
}

.job-details-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.recent-search-button {
    max-height: 2rem;
}

.letter-spacing-normal {
    letter-spacing: normal;
}

#PageContent_frmDetails_grdReturnLines > thead > tr > th.table-center-text {
    text-align: center;
}

.imgLogoPreview {
    width: 130px;
    height: 110px;
    display: block;
    margin-top: 5px;
    border: 2px solid grey;
    object-fit: contain;
}

.mondu-snippet {
    display: flex;
    align-items: center;
}

    .mondu-snippet img {
        display: block;
        height: 64px;
        width: 100px;
        justify-self: center;
    }

    .mondu-snippet span {
        display: block;
        width: 300px;
    }

.po-integration-button {
    background-color: #ffffff !important;
    border: 1px solid lightgrey;
    border-radius: 2px;
    vertical-align: middle;
    margin-bottom: 4px;
}

.bordered-box {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    background-color: #f9f9f9;
    margin-top: 15px;
}

.jobs-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jobs-modal-content {
    background: #fff;
    padding: 30px 24px 24px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.2);
    min-width: 320px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

.jobs-pl-modal-body-text {
    margin: 24px 0;
    font-size: 1.1em;
    color: #333;
}

.jobs-modal-title {
    font-size: 1.2em;
    color: #2c3e50;
    margin-bottom: 16px;
    text-align: center;
}

.jobs-modal-content button {
    padding: 8px 16px;
    font-size: 1rem;
    background: var(--blue-primary);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
}

    .jobs-modal-content button:hover {
        background: var(--blue-secondary);
    }

.jobs-modal-content .close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

    .jobs-modal-content .close:hover {
        color: #333;
    }

.po-line-total-ex-vat .po-linecost-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}


.po-line-total-ex-vat input[type="checkbox"] {
    margin: 0;
    transform: translateY(-1px);
}

.grid-small-column {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbn-event.cbn-group-event-vehicle.cbn-event-vehicle.cbn-bg-light, .cbn-event.cbn-group-event-vehicle.cbn-event-vehicle.cbn-event-group-vehicle, .cbn-staff-list-container.cbn-scrolling .cbn-staff-item {
    background-color: var(--blue-light);

    .header {
        background-color: var(--blue-light);
    }
}

.line-cost-ex-vat[readonly] {
    background-color: #eee;
    cursor: not-allowed;
}